Kutumia Hook useRef kwa Kufanya Kazi na Refs katika React

Katika somo hili tutafanya kazi na refs. Ili kuonesha wazi hebu tuchambue utendakazi wa hook useRef ikilinganishwa na hook useState.

Hebu tuunde komponenenti yenye kifungo:

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

Hebu tuingize useState kwenye komponenenti:

import { useState } from 'react';

Na tuunde state state:

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

Na sasa tufanye ili kwa kubofya kifungo state wetu iongezeke kwa 1. Thamani ya state tutaionesha moja kwa moja kwenye maandishi ya kifungo:

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

Hebu tuelezee chaguo za kukokotoa kwa ajili ya kushughulikia kubofya kwenye kifungo handleStateClick:

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

Hebu tubofye kifungo kidogo na tuone jinsi thamani ya state inavyoongezeka.

Na sasa hebu tuunde komponenenti App, lakini tukitumia sio state, bali ref.

Kwanza, hebu tuingize useRef kwenye komponenenti:

import { useRef } from 'react';

Na tuunde ref ref. Kwa matokeo yake, hook useRef hurudisha kitu cha ref chenye sifa moja tu current, ambayo ndiyo itakuwa ya kuvutia kwetu baadaye. Hebu tuweke thamani yake ya kwanza kuwa 0:

const ref = useRef(0);

Hebu tuweke kichujio cha kubofya kwenye kifungo. Kumbuka kwamba tunapaswa kusoma/kubadilisha sio ref yenyewe, bali sifa yake current:

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

Hebu tuongeze chaguo za kukokotoa kwa ajili ya kushughulikia kubofya kwenye kifungo chetu. Hapa tutaongeza current kwa 1, kama tulivyofanya kwenye mfano uliopita na state. Tofauti na state, ambapo inahitaji chaguo za kukokotoa setState ili kubadilisha thamani yake, na sifa ya ref tunafanya kazi nayo moja kwa moja:

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

Sasa hebu tubofye kifungo chetu. Na tunaona nini? Wakati wa kubofya, kama tulivyokuwa awali 0, imebaki hivyo hivyo na haijabadilika.

Bila shaka, unaweza kuanza kutilia shaka kama thamani inabadilika kabisa. Hebu tuangalie hili. Kwa hili, kwenye chaguo za kukokotoa za kishughulia kibofya tuongeze mstari mwingine wa nambari ya kuonyesha thamani ya current kwenye koni:

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

Na sasa, kwa kufungua koni kwenye kivinjari, tena tubofye kifungo na tukihakikishe kwamba thamani kweli inabadilika kwa kilio bofya na hakuna udanganyifu wowote.

Sasa tunaona kwamba tofauti na state, mabadiliko ya thamani ya ref hayasababishi kuunda upya komponenenti. Kwa hiyo kila wakati kwenye maandishi ya kifungo tunaona thamani ya kwanza 0.

Kwa hivyo, ikiwa data zako zinatumika kwa ajili ya kuunda upya, basi hifadhi kwenye state, na ikiwa hauitaji kuunda upya, kwa hali kama hiyo utumiaji wa refs unaweza kuwa wa ufanisi zaidi.

Hebu kwenye komponenenti yako iwe na aya na maandishi 'maandishi' na kifungo. Fanya ili kila wakati kwa kubofya kifungo mwishoni mwa maandishi ya aya yaongezwe alama ya mshangao. Fanya hili kwa kutumia state.

Unde komponenenti App, lakini badala ya state sasa tumia ref. Hakikisha kwamba wakati wa kubonyeza kifungo maandishi ya aya hayatabadilika. Ongeza pia kuonyesha maandishi ya aya kwenye koni, uifungue na uhakikishe, kwamba kwa kweli maandishi yanabadilika.