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: Ավելացրեք Parent կոմպոնենտի տակ App-ում կոճակ, որի յուրաքանչյուր սեղմման դեպքում ստեյթի արժեքը կնվազի 2-ով: