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

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

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

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

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

import { useState } from 'react';

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

const [state, setState] = useState(0);

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

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

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

function handleStateClick() {
	setState(state + 1);
}

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

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

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

import { useRef } from 'react';

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

const ref = useRef(0);

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

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

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

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

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

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

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

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

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

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

Թող ձեր կոմպոնենտում լինի 'text' տեքստով պարբերություն և կոճակ: Անեք, որ ամեն անգամ կոճակի վրա կտտացնելիս պարբերության տեքստի վերջում ավելանա բացականչական նշան: Արեք դա օգտագործելով սթեյթ:

Ստեղծեք App կոմպոնենտ, բայց սթեյթի փոխարեն հիմա օգտագործեք ref: Համոզվեք, որ կոճակը սեղմելիս պարբերության տեքստը չի փոխվի: Նաև ավելացրեք պարբերության տեքստի արտածումը կոնսոլ, բացեք այն և համոզվեք, որ իրականում տեքստը փոխվում է: