React'те контекстту жаңыртуу

Бул сабакта биз контексттин мааниси өзгөргөндө компоненттерди жаңыртууну карайбыз. Сиз контексттин өзгөрүшүн каалайсыз деп коёлу.

Бул учурда контекстти стейттер менен бирге колдонуу пайдалуу. Өткөн сабакта жасаган кутучалар менен болгон колдонмобузду бир аз өзгөртөлү жана баскычты басканда берилген маани 'metal box :)' болуп калышы үчүн келтирели.

Ошентип, биздин App файлыбызды алабыз жана BigBox'тон кийин баскычты түзөбүз:

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

Андан кийин useState hookун импорттойбуз жана 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'ге азаят.