Reactda Kontekstni Yangilash

Ushbu darsda kontekst qiymati o'zgarganda komponentlarni yangilashni ko'rib chiqamiz. Faraz qilaylik, kontekst o'zgarishini xohlaysiz.

Bunday holda, kontekstni holatlar bilan birgalikda qo'llash foydali bo'ladi. Keling, oldingi darsda yaratgan qutilar bilan bog'liq ilovamizni biroz o'zgartiraylik va tugma bosilganda uzatilayotgan qiymat 'metal box :)' ga aylanishini ta'minlaylik.

Shunday qilib, App faylimizni olamiz va BigBox dan keyin tugma chizamiz:

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
			<button>click</button>
		</MyContext.Provider>
	);
}

Keyin, useState hookini import qilamiz va name holatini yaratamiz, uning qiymati tugma bosilganda o'zgaradi. Unga dastlabki qiymat sifatida kontekst qiymati sifatida darhol uzatganimiz qiymatni, ya'ni 'small box :)' ni belgilaymiz:

function App() {
	const [name, setName] = useState('small box :)');
}

Bu safar kontekst orqali satr emas, balki name holatini uzatamiz:

<MyContext.Provider value={name}>
	<BigBox />
	<button>click</button>
</MyContext.Provider>

Oxirgi qadam sifatida, tugma bosilganda setName funksiyasi yordamida holatning yangi qiymatini 'metal box :)' ga o'rnatadigan ishlovchini chaqiramiz. Shundan so'ng tugmani bosib natijani tekshirish mumkin bo'ladi:

<button onClick={() => {
	setName('metal box :)');
}}>click</button>

Oldingi darsdagi vazifalarni yechishda yaratgan ilovangizdan foydalaning. App dan kontekst orqali raqam o'rniga uzatadigan age holatini yarating, unga dastlabki qiymat sifatida 50 ni belgilang. App ichidagi Parent komponenti ostiga tugma qo'shing, har bir marta bosilganda age holatining qiymati 2 ga kamayadi.