Reactда контекстни янгилаш

Бу дарсда биз контекст қиймати ўзгарганда компонентларни янгилашни кўриб чиқамиз. Фараз қилайлик, сиз контекстнинг ўзгаришини истасангиз.

Бундай ҳолда контекстни стейтлар билан биргаликда қўллаш фойдали. Келинг, бир oz илгари дарсда ясаган қутичалар билан ишлайдиган иловамизни ўзгартирамиз ва тугма босиш орқали ўтказилаётган қиймат 'metal box :)' га айланишини таъминлаймиз.

Шунинг учун, бизнинг App файлимизни оламиз ва BigBox дан кейин tugmachani chizamiz:

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

Кейин useState hookini импорт қиламиз ва name стейтини яратамиз, унинг қиймати tugma босиш орқали ўзгаради. Унга дastlabки қиймат sifatida биз дарстав контекст қиймати sifatida берган matnni, яъни 'small box :)' ни берамиз:

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

Бори бу сафар контекст орқали matn эмас, балки name стейтини ўтказамиз:

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

Охирги қадам sifatida биз tugma босиш ишловчисини чақирамиз ва setName функцијаси ёрдамида стейтнинг янги қийматини 'metal box :)' га ўрнатамиз. Шундан сўнг tugmani босиб, натижани текшириш мумкин:

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

Уйин: Сизнинг илгари дарс учун масалаларни ечганда яратган иловангиздан фойдаланинг. age стейтини яратинг, уни сиз сон ўрнига контекст орқали App дан ўтказасиз, унга дastlabки қиймат sifatida 50 ни беринг. App даги Parent компоненти ostiga tugma qo'shing, ҳар бор унга босилганда age стейтининг қиймати 2 га камайтирилсин.