ساختار React Fiber

React Fiber یک بازنویسی عمده از معماری React است که در React 16 معرفی شد. این معماری به طور خاص برای بهبود عملکرد و انعطاف‌پذیری React در مدیریت رندرینگ پیچیده و انیمیشن‌های روان طراحی شده است. قبل از React Fiber، React از یک الگوریتم ساده و مستقیم برای به‌روزرسانی رابط کاربری استفاده می‌کرد که در شرایط خاصی می‌توانست مشکلات عملکردی ایجاد کند.

ویژگی‌های کلیدی React Fiber:

قابلیت توقف و از سرگیری کارها: در React Fiber، عملیات رندرینگ می‌تواند متوقف شده و در مرحله‌ای دیگر از سر گرفته شود. این قابلیت به React امکان می‌دهد که به جای اجرای رندرینگ به طور همزمان، آن را به قطعات کوچک‌تر تقسیم کرده و در فواصل زمانی مناسب اجرا کند.

اولویت‌بندی کارها: React Fiber به هر یک از کارهای رندرینگ یک اولویت تخصیص می‌دهد. این اولویت‌بندی به React اجازه می‌دهد تا به عملیات مهم‌تر (مانند به‌روزرسانی‌های ضروری رابط کاربری) سریع‌تر رسیدگی کند و کارهای کم‌اهمیت‌تر را به تأخیر بیندازد.

حالت Concurrent (هم‌زمان): در حالت Concurrent، React می‌تواند عملیات رندرینگ را با عملیات کاربر همزمان انجام دهد، بدون اینکه تجربه کاربر تحت تأثیر قرار گیرد.

بازیابی بهتر از خطاها: React Fiber همچنین مکانیزم‌های بهتری برای بازیابی از خطاها ارائه می‌دهد. این ویژگی به توسعه‌دهندگان امکان می‌دهد که با خطاها در سطح مؤلفه‌ها بهتر برخورد کنند.

React Fiber در اصل یک بازنگری اساسی در شیوه مدیریت رندرینگ در React است که قابلیت‌های جدیدی را فراهم کرده و به بهبود تجربه کاربری در برنامه‌های پیچیده کمک کرده است.

فرض کنید در یک برنامه React، شما یک لیست بزرگ از آیتم‌ها دارید که هرکدام نیاز به رندرینگ دارند. اگر کاربر در همان لحظه در حال تایپ کردن در یک فیلد ورودی باشد، با معماری قدیمی React (قبل از Fiber)، رندر کردن کل لیست می‌تواند باعث شود که تایپ کردن کاربر با تأخیر مواجه شود، زیرا React باید ابتدا تمام عملیات رندرینگ را به پایان برساند و سپس به رویدادهای کاربر پاسخ دهد.

مثال با React Fiber:

در React Fiber، این مشکل بهبود یافته است. فرض کنید شما یک کامپوننت دارید که هم شامل یک فیلد ورودی و هم یک لیست بلند است:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([...Array(10000).keys()]);
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <input 
        type="text" 
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Type here..."
      />
      <ul>
        {items.map((item) => (
          <li key={item}>Item {item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

در این مثال، لیست items شامل 10,000 آیتم است که باید رندر شوند.

بدون React Fiber:

اگر React این لیست بزرگ را بدون Fiber رندر کند، ممکن است تایپ کردن در فیلد ورودی دچار تأخیر شود. این به این دلیل است که React باید تمام عناصر لیست را رندر کند قبل از اینکه بتواند به تعامل کاربر با فیلد ورودی پاسخ دهد.

با React Fiber:

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

این همان ویژگی “قابلیت توقف و از سرگیری کارها” و “اولویت‌بندی کارها” در React Fiber است که عملکرد و تجربه کاربری را بهبود می‌بخشد.