React’ning kelajagi

Reaktiv primitivlar, masalan, signal kabi texnologiyalarning keng tarqalgan qabul qilinishi bilan, ba’zilar React ham shunga o’xshash yondashuvni qabul qilishi mumkin deb o’ylashlari mumkin. Biroq, React jamoasi signalga “hayajonlanmaganligini” bildirgan va signallar taqdim etadigan shunga o’xshash ishlash samaradorligi afzalliklariga erishish uchun muqobil yondashuvni tanlashlarini bildirgan.

Buni biroz yaxshiroq tushunish uchun, React haqida o’rgangan ba’zi narsalarni misol bilan ko’rib chiqaylik. Quyidagi komponentni ko’rib chiqamiz:

import React, { useState } from "react";
import { ComponentWithExpensiveChildren } from "./ExpensiveComponent";
 
function Counter() {
  const [count, setCount] = useState(0);
  
  function increment() {
    setCount(count + 1);
  }
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
      <ComponentWithExpensiveChildren />
    </div>
  );
}
 
export default Counter;

Bu juda oddiy misolda, bizda Counter deb nomlangan state’ga ega bo’lgan komponent mavjud, unda bir nechta bolalar mavjud:

• Joriy hisobni ko’rsatuvchi <p> elementi
• Hisobni oshiradigan <button> elementi
• Ko’p hisoblashlarni bajaradigan qimmatli children’ni render qiladigan <ComponentWithExpensiveChildren> komponenti

Endi, agar biz hisobni oshirish uchun tugmani bosamiz, nima bo’ladi? Counter funksiyasi chaqiriladi/yangidan chaqiriladi/yangi render qilinadi, bu bilan uning barcha bolalari ham yangilanadi. Bu React’ning default xatti-harakatidir. Demak, <ComponentWithExpensiveChildren> komponenti ham yangilanadi, garchi u yangilanishi shart bo’lmasa: uning props yoki state’i o’zgarmagan taqdirda ham!

React’ning va kam tafsiliy darajali reaktivligi

Bu kam tafsiliy darajadagi reaktivlik React’ni potensialidan kam samarali qiladi. Biroq, bu muammoni juda oson hal qilish mumkin: biz faqat kerakli joyda va kerakli vaqtda memodan foydalanishimiz kerak:

import React, { useState, memo } from "react";
import { ComponentWithExpensiveChildren } from "./ComponentWithExpensiveChildren";
 
function Counter() {
  const [count, setCount] = useState(0);
  
  function increment() {
    setCount(count + 1);
  }
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
      <MemoizedComponentWithExpensiveChildren />
    </div>
  );
}
 
const MemoizedComponentWithExpensiveChildren = memo(
  ComponentWithExpensiveChildren
);
 
export default Counter;

Bu ishlaydi, chunki biz memodan har doim kerakli joyda foydalanishni eslaymiz. Haqiqatan ham, bu signallar bilan bir xil yuqori tafsiliy darajali reaktivlikni taqdim etadi. Biroq, bu signallarga nisbatan qulay emas, chunki har doim memodan foydalanishni eslab qolishimiz kerak.

Signal va React jamoasi yondashuvi

Ko’pchiligimiz, signallar bu muammoni oson hal qilishi mumkin deb o’ylashimiz mumkin, lekin Meta kompaniyasidagi React jamoasi signallar, memo kabi, kundalik dasturchilar uchun amalga oshirish tafsiloti bo’lishi kerak, deb hisoblaydi va React’dan foydalanadigan kundalik dasturchilar bu haqda o’ylamasligi kerak. Ular React’ning dastlabki qiymat taklifiga quloq solishadi: “UI’ni deklarativ tarzda tasvirlab bering, React esa qolganini amalga oshirsin.” React jamoasi, dasturchilar signallar, memo, yoki boshqa tafsilotlarga bog’lanib qolmasligini va React UI’ni eng optimal tarzda render qilishini ta’minlashini maqsad qilishadi.

Yangi Dastur: React Forget

Bu maqsadga erishish uchun jamoa yangi dastur ustida ishlamoqda: React Forget. Bu dastur orqali React UI’ni yanada samarali va intuitiv tarzda yaratishga yordam beradi, shunda dasturchilar ko’proq murakkablikni hisobga olishlari shart emas.