Reactте рендердин негизги өзгөчөлүгү эмне?

Reactтеги рендерингтин негизги өзгөчөлүгү — Virtual DOM жана Согласование алгоритмин колдонуу аркылуу колдонуучу интерфейсин эффективдүү жаңылоо.

Virtual DOM — бул реалдуу DOMдун жеңилдетилген сүрөттөмөсү эс тутумда. React Virtual DOMдун дарагын түзөт, ал учурдагы колдонуучу интерфейсинин абалын көрсөтөт.

Күйдүн же пропстун өзгөрүшү менен React жаңы Virtual DOM дарагын түзөт. Андан соң ал бул жаңы даракты мурунку менен салыштырат ("диффинг" деп аталган процесс) жана Согласование алгоритмин колдонуп аныктайт.

Согласование алгоритми реальдуу DOM менен жаңы Virtual DOMду синхрондоо үчүн керек болгон минималдуу өзгөртүүлөрдү аныктайт. Бардык DOMди кайра иштетпестен, React гана чын эле өзгөргөн бөлүктөрдү жаңылат.

Бул ыкма натыйжалуулугун кыйла жогорулатат, жай реальдуу DOM менен түздөн-түз иштөөдө кечигүүнү азайтат.

Процесс мисалы:

1. Баштапкы рендеринг: React Virtual DOM түзөт жана реалдуу DOM түзөт.
2. Күйдүн өзгөрүшү: Компонент жаңы маалыматтарды же пропсту алат.
3. Жаңы Virtual DOM түзүү: React жаңы Virtual DOM дарагын түзөт.
4. Диффинг: жаңы 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 жаңы Virtual DOM дарагын түзөт, анда count мааниси жаңыланат. Согласование алгоритми тек тексттик түйүндөгү өзгөрүүнү аныктайт жана аны гана реалдуу DOMдо жаңылат.