React-тағы контексті жаңарту

Бұл сабақта контекст мәні өзгерген кезде компоненттердің жаңарылуын қарастырамыз. Сіз контексттің өзгеруін қалайтыныңызды болжайық.

Бұл жағдайда контекстті стейттермен бірге қолдану пайдалы. Алдыңғы сабақта жасаған қорапшаларға арналған қолданбамызды сәл өзгертіп, батырманы басқан кезде жіберілетін мән 'metal box :)' болатындай етейік.

Сонымен, App файлымызды алып, BigBox-тен кейін батырма салайық:

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

Әрі қарай useState хукін импорттап, name стейтін құрастырайық, оның мәні батырманы басқан кезде өзгереді. Оған бастапқы мән ретінде біз бірден контекст арқылы жіберген мәнді, яғни 'small box :)' берейік:

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

Бұл жолы контекст арқылы жолды емес, name стейтін жібереміз:

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

Соңғы қадам ретінде батырманы басқанда setName функциясын қолданып, стейттің жаңа мәнін 'metal box :)' деп қоямыз. Осыдан кейін батырманы басып, нәтижені тексеруге болады:

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

Алдыңғы сабақтағы есептерді шешу кезінде жасаған қолданбаңызды пайдаланыңыз. age стейтін құрастырыңыз, оны App-тен контекст арқылы санның орнына жібересіз, оған бастапқы мән ретінде 50 белгілеңіз. App-тегі Parent компонентінің астына батырма қосыңыз, әр басқан сайын age стейтінің мәні 2-ге азаяды.