Batching updates (Yangilanishlarni guruhlash)

3-bobda biz brauzerlardagi document fragmentlarini DOM’ning o’zida mavjud bo’lgan API qismlaridan biri sifatida muhokama qildik: bu yengil konteynerlar bo’lib, ular DOM tugunlarining to’plamlarini saqlaydi va vaqtinchalik DOM uchun tayyorlash maydoni vazifasini bajaradi, unda bir nechta o’zgarishlarni amalga oshirish mumkin, asosiy DOM’ga ta’sir qilmasdan. Nihoyat, document fragmenti DOM’ga qo’shilganda, bitta reflow va repaint jarayoni ishga tushadi.

Xuddi shunga o’xshash tarzda, React reconciliation jarayonida real DOM’ga yangilanishlarni guruhlaydi, bir nechta vDOM yangilanishlarini bitta DOM yangilanishiga birlashtiradi. Bu real DOM’ni yangilashlar sonini kamaytiradi va shuning uchun veb-ilovalarning samaradorligini yaxshilaydi.

Yangilanishlarni guruhlash va unga misol

Buni tushunish uchun state’ni bir necha marotaba yangilaydigan komponentni ko’rib chiqaylik:

function Example() {
  const [count, setCount] = useState(0);
 
  const handleClick = () => {
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
  };
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

Ushbu misolda, handleClick funksiyasi setCount funksiyasini ketma-ket uzluksiz uch marta chaqiradi. Agar “batching”(yangilanishlarni guruhlash) bo’lmaganida, React real DOM’ni uch marta yangilagan bo’lardi, garchi count qiymati faqat bir marta o’zgargan bo’lsa ham. Bu samarasiz va sekin bo’lardi.

Biroq, React yangilanishlarni to’plab guruhlaganligi, ya’ni “batching” qilganligi, sababli, har safar count + 1 bilan uchta yangilanish o’rniga, u DOM’ga faqat bitta yangilanishni count + 3 qiymat bilan amalga oshiradi.

DOM’ga eng samarali guruhlangan yangilanishni hisoblash uchun React hozirgi vDOM daraxtining yangi nusxasini yaratadi, bu yerda count qiymati 3 ga teng bo’ladi. Bu daraxt brauzerdagi mavjud bo’lgan holat bilan moslashishi (reconciled bo’lishi) kerak, bu esa 0 ni 3 ga aylantirishni anglatadi. React yangi vDOM qiymati 3 dan foydalangan holda DOM’ga faqat bitta yangilanish talab qilinishini hisoblab chiqadi, DOM’ni qo’lda uch marta yangilash o’rniga. Bu “batching”ni qanday ishlashini tushuntiradi va bu biz chuqurroq o’rganishga kirishayotgan kengroq mavzuning bir qismi: reconciliation, yoki kelasi kutilayotgan DOM holatini hozirgi DOM bilan moslashtirish jarayoni.

React’ning eski “stack” reconciler’i

Hozirgi zamonaviy Reactning qanday ishlashini tushunishdan oldin, React 16-versiyasidan oldin, eski “stack” reconciliation mexanizmi bilan qanday qilib moslanganini ko’rib chiqamiz. Bu bizga bugungi kunda mashhur bo’lgan “Fiber reconciler” ga bo’lgan ehtiyojni tushunishga yordam beradi.