კონტექსტის განახლება 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-ში ღილაკი, რომლის ყოველ დაჭერაზე სთეიტის მნიშვნელობა age შემცირდება 2-ით.