ویژگی ها و قابلیت های جدید React js (ری اکت) در ورژن 18

در این مقاله ، قصد داریم ویژگی ها، قابلیت ها و آپدیت هایی که react (ری اکت) در نسخه 18 (Alpha) معرفی کرده است رو مورد بررسی قرار بدیم.

اولین سوالی که ممکن است ذهن شما را درگیر کند، این باشد که آبا با منتشر شدن نسخه رسمی react ورژن 18 آیا کدهای قدیمی شما نیاز به تغییرات دارد یا برای ادامه کار با react نیاز دارید که حتما این ویژگی ها را یاد بگیرید؟خب ،جواب این سوال دو کلمه است: نگران نباشید. می توانید پروژه ای که در حال توسعه دارید را به روال قبل ادامه دهید ، زیرا React 18 هیچ چیزی را خراب نمی کند و نیاز به تغییرات ندارید.

نکته: React 18 هنوز به صورت آلفا است و به صورت رسمی منتشر نشده است. بنابراین ویژگی هایی که در ادامه بیان خواهیم کرد را در نسخه رسمی می توانید،مشاهده و استفاده نمایید.

Concurrency در React چیست؟

موضوع اصلی این نسخه concurrency (همزمانی) است. برای شروع ، بیایید این موضوع رو موشکافی کنیم که concurrency چیست.

concurrency توانایی انجام چندین کار به طور همزمان است.با درنظر گرفتن یک برنامه که با React ساخته شده است، بیایید در نظر بگیریم که یک انیمیشن در یک component در حال اجرا است و در عین حال یک کاربر قادر است روی سایر component ها کلیک یا تایپ کند.

در اینجا ، در حالی که کاربر در حال تایپ و کلیک بر روی دکمه ها است ، یک انیمیشن نیز در حال اجراست.React باید همه فراخوانی های توابع، فراخوانی های hooks و event callbacks را مدیریت کند ، که چندین مورد از آنها حتی می توانند همزمان رخ دهند. اگر React تمام وقت خود را صرف render کردن فریم های انیمیشن کند ، کاربر احساس می کند که برنامه دچار مشکل شده است ، زیرا به ورودی های آنها عکس العملی نشان نمی دهد.

در حال حاضر React که بر روی یکsingle threaded اجرا می شود و باید این رویدادها و توابع را ترکیب ، مرتب سازی و اولویت بندی کند تا بتواند تجربه بهینه و کارآمدی را در اختیار کاربران قرار دهد.برای انجام این کار ، React از یک “dispatcher” داخلی استفاده می کند که وظیفه اولویت بندی و فراخوانی این callbackها را بر عهده دارد.

قبل از React 18 ، کاربر هیچ راهی برای کنترل ترتیب فراخوانی این توابع نداشت. اما در حال حاضر ، React تا حدی کنترل این event loop را از طریق API Transition به کاربر می دهد.

اگر قصد دارید تا اطلاعات بیشتری در این زمینه به دست آورید،پیشنهاد میکنم مقاله Dan Abramov را بخوانید : An ELI5 of concurrency.

The Transition API

توسعه دهندگان React چند API را در اختیار کاربران قرار داده اند که به کاربران اجازه می دهد تا بر روی concurrency کنترل داشته باشند.یکی از این API ها startTransition است که به توسعه دهندگان اجازه می دهد تا به React نشان دهند که چه اقداماتی ممکن است thread را block کرده و باعث ایجاد lag در صفحه شود.

به طور معمول ، این اقدامات همان اقداماتی هستند که ممکن است شما برای debounce انجام دهید، مانند استفاده از API برای جستجو یا انجام فرایندهای سنگین مانند جستجو در آرایه ای ای از 1000 رشته.(Debouncing در جاوا اسکریپت یک practice برای بهبود عملکرد مرورگر است.)

به روزرسانی های پیچیده در startTransition به عنوان غیر فوری علامت گذاری می شوند و در صورت ورود به روزرسانی های فوری تر مانند کلیک یا key presses ، قطع می شوند.

اگر یک transition توسط کاربر قطع شود (به عنوان مثال ، با تایپ چند حرف در یک فیلد جستجو) ، React کار render قدیمی را که به پایان نرسیده است ، کنار می گذارد و تنها آخرین به روز رسانی را ارائه می دهد.

مثالی از Transition API

برای درک بیشتر این موضوع ، بیایید یک component با search field را در نظر بگیریم. فرض کنید این کامپوننت دو تابع برای کنترل state دارد:

// Update input value
setInputValue(input)

// Update the searched value and search results
setSearchQuery(input);

// Update input value

setInputValue(input)

// Update the searched value and search results

setSearchQuery(input);

setInputValue وظیفه بروزرسانی فیلد input را بر عهده دارد، در حالی که setSearchQuery وظیفه جستجو بر اساس input value را برعهده دارد.

حال ، اگر این فراخوانی های توابع به طور همزمان در هر بار که کاربر شروع به تایپ می کرد اتفاق می افتاد ،یکی از 2 مورد زیر اتفاق می افتد:

چندین search calls انجام می شود ، که سایر network calls را به تاخیر می اندازد یا کند می کند.
یا به احتمال زیاد ، عملیات جستجو بسیار سنگین به نظر می رسد و صفحه را در هر keystroke قفل می کند.

در این مورد ، ما می توانیم setSearchQuery را درون startTransition قرار دهیم و به آن اجازه دهیم تا به صورت غیر ضروری عمل کند و تا زمانی که کاربر در حال تایپ کردن است به تأخیر بیفتد.

import { startTransition } from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

import { startTransition } from 'react';

// Urgent: Show what was typed

setInputValue(input);

// Mark any state updates inside as transitions

startTransition(() => {

// Transition: Show the results

setSearchQuery(input);

});

Transitions به شما امکان می دهد اکثر تعاملات(interactions ) را سریع نگه دارید ، حتی اگر منجر به تغییرات قابل توجهی در UI شود. همچنین به شما اجازه می دهد از اتلاف وقت در ارائه محتواهایی که دیگر مرتبط نیستند جلوگیری کنید.

React همچنین یک hook جدید به نام useTransition ارائه می دهد ، بنابراین می توانید loader را در حالی که transition در انتظار است نشان دهید. این به کاربر نشان می دهد که برنامه در حال پردازش ورودی خود است و نتایج را به زودی نمایش می دهد.

import { useTransition } from'react';

const [isPending, startTransition] = useTransition();

const callback = () => {
  // Urgent: Show what was typed
  setInputValue(input);

  // Mark any state updates inside as transitions
  startTransition(() => {
    // Transition: Show the results
    setSearchQuery(input);
  });
}

{isPending && }

import { useTransition } from'react';

const [isPending, startTransition] = useTransition();

const callback = () => {

// Urgent: Show what was typed

setInputValue(input);

// Mark any state updates inside as transitions

startTransition(() => {

// Transition: Show the results

setSearchQuery(input);

});

}

{isPending && }

به عنوان یک قاعده کلی ، می توانید ازtransition API در هر کجا کهnetwork calls یا فرایندهای render-blocking وجود دارد استفاده کنید.شما می توانید در مقاله An explanation of startTransition که توسط Ricky از تیم توسعه هسته React نوشته شده است،اطلاعات بیشتری در مورد Transitions Api کسب کنید

همجنین از طریق لینک های زیر می توانید دمویی از پیاده سازی Transitions Api در لینک های زیر ببینید

سوالاتی که در مصاحبه یک React developer پرسیده می شود

استفاده از useTransition و Suspense

استفاده از startTransition با یک الگوریتم پیچیده rendering

Batching در React

ویژگی بعدی که به react در نسخه 18 اضافه شده است، batching نام دارد. batchingچیزی است که توسعه دهنده ها عموماً به آن اهمیت نمی دهند ، اما خوب است بدانید در پشت صحنه چه می گذرد.

هر زمان که از setState برای تغییر یک متغیر در هر تابعی استفاده می کنید، React به جای ایجاد render در هر setState ، در عوض همه setStatesها را جمع آوری کرده و سپس آنها را با هم اجرا می کند. این عملیات به عنوان batching شناخته می شود.

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setFlag(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

function App() {

const [count, setCount] = useState();

const [flag, setFlag] = useState(false);

function handleClick() {

setCount(c => c + 1); // Does not re-render yet

setFlag(f => !f); // Does not re-render yet

// React will only re-render once at the end (that's batching!)

}

return (

<div>

<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>

</div>

);

}

این موضوع برای عملکرد عالی است زیرا از re-renders غیر ضروری اجتناب می کند. همچنین در کامپوننتی که دارید از render کردن state هایی که “half-finished” هستند و تنها یک state variable بروزرسانی شده است جلوگیری می کند تا باعث ایجاد مشکل در UI نشود.

تا قبل از نسخه 18 react فقط در رویدادهای مرورگر مثل کلیک کردن از batch استفاده می کرد، اما حالا بعد از اتمام و مدیریت یک عملیات مثل fetch از batch استفاده می کند.

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    fetchSomething().then(() => {
      // React 17 and earlier does NOT batch these because
      // they run *after* the event in a callback, not *during* it
      setCount(c => c + 1); // Causes a re-render
      setFlag(f => !f); // Causes a re-render
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

function App() {

const [count, setCount] = useState();

const [flag, setFlag] = useState(false);

function handleClick() {

fetchSomething().then(() => {

// React 17 and earlier does NOT batch these because

// they run *after* the event in a callback, not *during* it

setCount(c => c + 1); // Causes a re-render

setFlag(f => !f); // Causes a re-render

});

}

return (

<div>

<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>

</div>

);

}

اگر پروژه شما با نسخه 18 react باشد،تمامی بروز رسانی ها به طور خودکار batch می شوند و اهمتی ندارد که از کجا نشات می گیرد.

این بدان معناست که روزرسانی های درون timeouts ، promises ، native event handlers یا هر event دیگری، به همان روشی که در داخل React events اتفاق می افتد ، batch شود. این امر باعث می شود که rendering کمتری توسط React انجام شود و در نتیجه عملکرد بهتری در برنامه ها داشته باشیم.

شما می توانید اطلاعات بیشتری در مورد batching از مقاله An explanation of Batching که توسط Dan Abramov نوشته شده است،کسب کنید

Demos of batching

قبل از React 18

بعد از React 18

The Suspense API

React 18 تغییرات زیادی برای بهتر شدن عملکرد Server-Side Rendered ایجاد کرده است.Server-side rendering یک راه برای render کردن JS data به HTML در سرور است که باعث کاهش محاسبات در frontend می شود.این باعث می شود که initial page در بیشتر موارد سریعتر بارگذاری شود.

Server Side Rendering در React در 4 مرحله متوالی انجام می شود:

در سرور ، داده ها برای هرکامپوننت fetch می شود.
در سرور ، کل برنامه rendered to HTML می شود و برای client ارسال می شود.
در client ، کد جاوا اسکریپت برای کل برنامه fetch می شود.
در client ، جاوا اسکریپت React را به HTML تولید شده توسط سرور متصل می کند که به Hydration معروف است.

Suspense API به شما این امکان را می دهد که برنامه خود را به واحدهای مستقل کوچکتر تقسیم کنید ، که این مراحل را به طور مستقل طی می کنند و بقیه برنامه را block نمی کنند. در نتیجه ، کاربران محتوا را زودتر می بینند و می توانند خیلی سریعتر با آن ارتباط برقرار کنند.

Suspense API چگونه کار می کند؟

با استفاده از SSR که در حال حاضر وجود دارد،عملیات render کردن HTML و hydration باید برای همه برنامه باشد یعنی “یا همه یا هیچ چیز”

اما React 18 یک امکان جدید به شما می دهد. می توانید قسمتی از صفحه را با <Suspense> به صورت کامل wrap کنید.

<Suspense fallback={<Spinner />}>
  {children}
</Suspense>

{children}

</Suspense>

Selective Hydration

قبل از React 18 ، اگر کد کامل جاوا اسکریپت load نشده باشد ، hydration شروع نمی شود. برای برنامه های بزرگتر ، این روند ممکن است مدتی طول بکشد.اما در ورژن 18 <Suspense> به شما اجازه می دهد عملیات hydrate قبل از اینکه کامپوننت های فرزند load شود را انجام دهید.

با wrap کردن کامپوننت در <Suspense> ، می توانید به React بگویید که نباید مانع از stream بقیه صفحه و حتی hydration شود. این بدان معناست که دیگر لازم نیست منتظر بمانید تا تمام کد بارگذاری شود تا hydration شروع شود. React می تواند پارت ها را هنگام بارگیری hydrating کند.

این 2 ویژگی Suspense و چندین تغییر دیگر که در React 18 معرفی شده اند ، بارگذاری اولیه صفحات را به طرز فوق العاده ای سرعت می بخشد.

شما می توانید با مطالعه مقاله explanation of Suspense SSR که توسط Dan Abramov نوشته شده است،اطلاعات بیشتری در این مورد کسب کنید

خلاصه

به طور خلاصه ، ویژگی هایی که در React 18 اضافه خواهد شد، عبارت اند از:

کنترل Concurrency با Transition API
Batching خودکار فراخواتی توابع و event ها برای بهتر شدن عملکرد برنامه های نوشته شده با React js
سرعت بیشتر load صفحات در SSR با Suspense

کاربران عزیزی که در دوره آموزش جامع ReactJS قبلا ثبت نام کرده اند، این ویژگی ها به محض معرفی شدن نسخه رسمی React 18 به سرفصل های دوره به صورت رایگان اضافه خواهد شد.

ویژگی ها و قابلیت های جدید react 18

Concurrency در React چیست؟

The Transition API

مثالی از Transition API

Batching در React

Demos of batching

The Suspense API

Suspense API چگونه کار می کند؟

Selective Hydration

خلاصه

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

Concurrency در React چیست؟

The Transition API

مثالی از Transition API

Batching در React

Demos of batching

The Suspense API

Suspense API چگونه کار می کند؟

Selective Hydration

خلاصه

مطالب زیر را حتما مطالعه کنید

فریمورک های Frontend که باید در سال 2021 یاد بگیرید

نگاه اولیه به React Server Component

React Higher Order Components چیست

5 React Best Practice که باید در سال 2020 یاد بگیرید

Hook های مفیدی که باید در پروژه بعدی React خود از آن استفاده کنید

آموزش استفاده و کار با useContext Hook در react

دیدگاهتان را بنویسید لغو پاسخ