Օգտագործելով useRef հուկը ref-ների հետ աշխատելու համար React-ում

Այս դասում մենք կաշխատենք ref-ների հետ: Պարզության համար եկեք ուսումնասիրենք useRef հուկի աշխատանքը՝ համեմատելով այն useState հուկի հետ:

Եկեք ստեղծենք կոմպոնենտ կոճակով.

App.jsxreturn (
  <div>
    <button>
      state click
    </button>
  </div>
);

Եկեք իմպորտ անենք useState կոմպոնենտում.

App.jsximport { useState } from 'react';

Եվ ստեղծենք state սթեյթ.

App.jsxconst [state, setState] = useState(0);

Հիմա եկեք անենք, որ կոճակի վրա կտտացնելիս մեր state-ը մեծանա 1-ով: Սթեյթի արժեքը կցուցադրենք անմիջապես կոճակի տեքստում.

App.jsx<button onClick={handleStateClick}>
  state click: {state}
</button>

Եկեք նկարագրենք handleStateClick ֆունկցիան կոճակի վրա կտտացնելու համար.

App.jsxfunction handleStateClick() {
  setState(state + 1);
}

Եկեք մի քանի անգամ կտտացնենք կոճակին և կտեսնենք, թե ինչպես է սթեյթի արժեքը մեծանում:

Հիմա եկեք ստեղծենք App կոմպոնենտը, բայց օգտագործելով ոչ թե սթեյթ, այլ ref:

Սկզբում, եկեք իմպորտ անենք useRef կոմպոնենտում.

App.jsximport { useRef } from 'react';

Եվ ստեղծենք ref ref-ը: useRef հուկը վերադարձնում է ref-ի օբյեկտ current միակ հատկությամբ, որն մեզ հետագայում կհետաքրքրի: Եկեք դրա սկզբնական արժեքը դնենք 0:

App.jsxconst ref = useRef(0);

Եկեք ավելացնենք կլիկի մշակիչ մեր կոճակի վրա: Հիշեք, որ մենք պետք է կարդանք/փոխենք ոչ թե ref-ն, այլ նրա current հատկությունը.

App.jsx<button onClick={handleRefClick}>
  ref click: {ref.current}
</button>

Ավելացնենք ֆունկցիա մեր կոճակի կլիկը մշակելու համար: Այստեղ մենք կմեծացնենք current-ը 1-ով, ինչպես նախորդ օրինակում սթեյթի դեպքում: Ի տարբերություն սթեյթի, որտեղ պահանջվում է setState ֆունկցիա դրա արժեքը փոխելու համար, ref-ի հատկության հետ մենք աշխատում ենք անմիջապես.

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
}

Հիմա եկեք կտտացնենք մեր կոճակին: Եվ ի՞նչ ենք տեսնում: Դրա վրա կտտացնելիս, ինչպես սկզբում ունեինք 0, այնպես էլ չի փոխվում:

Դուք, իհարկե, կարող եք կասկածել, որ արժեքն ընդհանրապես փոխվում է: Եկեք ստուգենք սա: Դրա համար կլիկի մշակիչ ֆունկցիայում եկեք ավելացնենք ևս մեկ տող կոդ, որը կտպի current-ի արժեքը կոնսոլում.

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
  console.log('ref click: ' + ref.current);
}

Հիմա, բրաուզերում կոնսոլը բացելով, նորից կտտացնենք կոճակին և կհամոզվենք, որ արժեքը իսկապես փոխվում է յուրաքանչյուր կտտոցի հետ և որևէ խաբեություն չկա:

Հիմա մենք տեսնում ենք, որ ի տարբերություն սթեյթի, ref-ի արժեքի փոփոխությունը չի առաջացնում կոմպոնենտի վերաարտապատկերում: Այդ իսկ պատճառով մենք ամեն անգամ կոճակի տեքստում տեսնում ենք սկզբնական արժեքը՝ 0:

Այսպիսով, եթե ձեր տվյալներն օգտագործվում են արտապատկերման համար, ապա պահեք դրանք սթեյթում, իսկ եթե ձեզ վերաարտապատկերում պետք չէ, այդ դեպքում ref-ների օգտագործումը կարող է դառնալ ավելի արդյունավետ: