Reconciliation’ni yaxshiroq tushunish

Tezda ko’z yugurtirib chiqadigan bo’lsak, React’ning virtual DOM’i bizning kerakli UI holatimizning chizmasidir. React bu chizma yordamida, reconciliation(moslashtirish) deb ataladigan jarayon orqali, uni berilgan muhitda; odatda veb-brauzerda, lekin boshqa muhitlarda, masalan, terminal, iOS va Android kabi native platformalarda ham amalga oshiradi.

Quyidagi kodni ko’rib chiqamiz:

import { useState } from "react";
 
const App = () => {
  const [count, setCount] = useState(0);
 
  return (
    <main>
      <div>
        <h1>Hello, world!</h1>
        <span>Count: {count}</span>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </main>
  );
};

Ushbu kod qismi UI holatini qanday bo’lishini deklarativ tavsifini o’z ichiga oladi: elementlar daraxti. Bizning hamkasblarimiz va React bu kodni o’qib, biz hisoblagich(counter) ilovasini yaratmoqchi ekanligimizni tushunishlari mumkin. Reconciliation’ni yaxshiroq tushunish uchun, bunday komponentga duch kelganda React ichida nimalar sodir bo’lishini tushunishimiz kerak.

Birinchidan, JSX React elementlari daraxtiga aylanadi. Bu biz Virtual Dom bobida ko’rgan narsalarimizdir. Ushbu component chaqirilganda, App komponenti o’z bolalari yana boshqa React elementlari bo’lgan React elementini qaytaradi. React elementlari o’zgarmasdir(biz uchun) va UI’ning kerakli holatini ifodalaydi. Ular haqiqiy UI holati emas. React elementlari React.createElement yoki JSX < belgisi orqali yaratiladi, shuning uchun bu quyidagi ko’rinishga transpilatsiya qilinadi:

const App = () => {
  const [count, setCount] = useState(0);
 
  return React.createElement(
    "main",
    null,
    React.createElement(
      "div",
      null,
      React.createElement("h1", null, "Hello, world!"),
      React.createElement("span", null, "Count: ", count),
      React.createElement(
        "button",
        { onClick: () => setCount(count + 1) },
        "Increment"
      )
    )
  );
};

Bu bizga ushbu tarzda yaratilgan React elementlari daraxtini quyidagicha beradi:

{
  type: "main",
  props: {
    children: {
      type: "div",
      props: {
        children: [
          {
            type: "h1",
            props: {
              children: "Hello, world!",
            },
          },
          {
            type: "span",
            props: {
              children: ["Count: ", count],
            },
          },
          {
            type: "button",
            props: {
              onClick: () => setCount(count + 1),
              children: "Increment",
            },
          },
        ],
      },
    },
  },
}

Ushbu kod qismi bizning Counter komponentimizdan keladigan virtual DOM’ni ifodalaydi. Bu birinchi render bo’lgani uchun, ushbu daraxt endi imperativ DOM API’lariga minimal darajada chaqiruvlar yordamida brauzerga yuklanadi. React imperativ DOM API’lariga minimal chaqiruvlar qilishni qanday ta’minlaydi? Bu vDOM yangilanishlarini bitta real DOM yangilanishiga to’plash(batching) orqali amalga oshiriladi va oldingi boblarda muhokama qilingan sabablarga ko’ra DOM’ga iloji boricha kamroq tegadi. Buni tushunish uchun, biz buni yanada chuqurroq ko’rib chiqamiz va batching’ni to’liq tushunamiz.