React reconciliation туралы айта аласыз ба?

React үйлесімділігі — бұл жаңа виртуалды DOM-ды алдыңғысымен салыстыру процесі, интерфейсті жаңарту үшін нақты DOM-ға ең аз өзгерістер енгізу керек екенін анықтау.

Негізгі ұғымдар:

• React виртуалды UI көрінісін (Virtual DOM) жасайды.
• Құрылым жағдайы өзгергенде жаңа Virtual DOM құрылады.
• React жаңа Virtual DOM-ды алдыңғысымен салыстырады (diffing).
• Ең аз өзгерістер жиынтығын табады (patches).
• Бұл өзгерістерді нақты DOM-ға қолданады, бұл UI-ды тиімді жаңартуға мүмкіндік береді.

Мысал:

function Counter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>Түймені басу саны {count}</button>;
}

Әр басқанда React жаңа Virtual DOM-ды құрып, оны алдыңғысымен салыстырады және тек түйменің ішіндегі мәтінді жаңартады, барлық элементті қайта салмайды.