React'те реф менен иштоо үчүн useRef хуку

Бул сабакта биз реф менен иштейбиз. Ачык-айкын болушу үчүн, келгиле 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 компонентин түзөлү.

Башында, компонентке useRef импорттойлу:

import { useRef } from 'react';

Дагы ref рефин түзөлү. useRef хуку өзүнүн натыйжасында current деген жалгыз касиети бар реф объектин кайтарат, ал бизди кийинчерээк кызыктырат. Анын баштапкы маанисин 0 кылалы:

const ref = useRef(0);

Баскычка чыкылдатуу иштеткичин орнотойлу. Эсиңизде болсун, биз ref өзүн эмес, анын current касиетин окушубуз/өзгөртүшүбүз керек:

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

Баскычты чыкылдатуу үчүн функция кошойлу. Бул жерде биз, стейт менен болгон мисалдагыдай эле, current 1ге көбөйтөбүз. Стейттен айырмаланып, ал жерде маанисин өзгөртүү үчүн setState функциясы талап кылынса, рефтин касиети менен биз түздөн-түз иштейбиз:

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

Эми баскычты басабыз. Эмнени көрөбүз? Аны чыкылдатканда, баштапкы 0 бизде кандай болсо, ошондой кала берет, өзгөрбөйт.

Сиз, албетте, маани өзгөрөт деп шүбөлөнө баштай аласыз. Келгиле, муну текшерип көрөлү. Бул үчүн чыкылдатуу иштеткичине current маанисин консолго чыгаруучу дагы бир сап коду кошойлу:

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

Эми, браузердеги консолду ачып, баскычты дагы бир нече жолу басып, ар бир чыкылдатууда маанинин чындыгында өзгөрүп тургандыгын жана эч кандай алдамчылык жок экендигин көрөбүз.

Эми биз стейттен айырмаланып, рефтин мааниси өзгөргөндө компоненттин рендерилбегенин көрөбүз. Ошондуктан баскычтын текстинде ар дайым баштапкы 0 маанисин көрөбүз.

Ошентип, эгер сиздин маалыматыңыз рендеринг үчүн колдонулса, анда аны стейтте сактаңыз, ал эми рендеринг керек болбосо, мындай учурда рефти колдонуу натыйжалуураак болушу мүмкүн.

Сиздин компонентиңизде 'text' тексти бар абзац жана баскыч болсун. Баскычты ар бир жолу чыкылдатканда, абзацтын текстинин аягына үн белгиси кошулган кылыңыз. Муну стейт менен жасаңыз.

App компонентин түзөлү, бирок азыр стейттин ордуна рефти колдонуңуз. Баскычты басканда абзацтын тексти өзгөрбөй тургандыгына көзүңүз жетсин. Ошондой эле абзацтын текстин консолго чыгарууну кошуңуз, консолду ачып, текстинин чындыгында өзгөрүп тургандыгын көрүңүз.