Хусусияти асосии рендеринг дар React чист?

Хусусияти асосии рендергироии React истифодаи Virtual DOM ва алгоритми reconciliation барои навсозии муассиронаи интерфейси корбар мебошад.

Virtual DOM намоиши сабук ва осон аз DOM-и воқеӣ дар хотира мебошад. React дарахти унсурҳои Virtual DOM-ро месозад, ки ҳолати ҳозираи интерфейси корбарро ифода мекунад.

Вақте ки ҳолат ё props-и компонент тағир меёбад, React дарахти навро месозад. Пас, он ин дарахтро бо дарахти қаблӣ муқоиса мекунад (процесси ки "diffing" ном дорад) бо истифода аз алгоритми reconciliation.

Алгоритми reconciliation муайян мекунад, ки минималтарин маҷмӯи тағиротҳо барои ҳамоҳангсозии DOM-и воқеӣ бо Virtual DOM-и нав зарур аст. Ба ҷои навсозии тамоми DOM, React танҳо қисмҳое, ки воқеан тағир ёфтаанд, навсозӣ мекунад.

Ин усул ба таври назаррас самаранокиро баланд мебардорад, бо кам кардани дасткорӣҳои мустақим бо DOM-и суст.

Маслиҳат барои раванди:

1. Рендери ибтидоӣ: React Virtual DOM-ро месозад ва DOM-и воқеиро меафзояд.
2. Тағйироти ҳолат: Компонент маълумот ё props-ҳои нав мегирад.
3. Тартиби нав Virtual DOM: React дарахти навро месозад.
4. Diffing: муқоиса кардани Virtual DOM-и нав бо қаблӣ.
5. Иҷрои тағиротҳо: React танҳо узелҳои тағирёфта дар DOM-и воқеиро навсозӣ мекунад.

// Маслиҳат барои компоненти бо ҳолат
function Counter() {
  const [count, setCount] = React.useState(0);

  // Ин функсия сабаби навсозии дубора мешавад
  function handleClick() {
    setCount(count + 1);
  }

  return (
    // Дар клик ба тугма, handleClick даъват мешавад
    <button onClick={handleClick}>
      Санаи кликҳо: {count}
    </button>
  );
}

Дар ин мисол, ҳар бор ки ба тугма клик мекунед, setCount ҳолатро нав мекунад. React дарахти навро бо арзиши навшудаи count месозад. Алгоритми reconciliation муайян мекунад, ки танҳо матни дохили тугма тағир ёфтааст ва танҳо онро дар DOM-и воқеӣ навсозӣ мекунад.