باز کردن قفل هوش مصنوعی کامپوننت: نگاهی عمیق به ردیاب فعالیت تجربی React

در چشم‌انداز همیشه در حال تحول توسعه وب، پیگیری عملکرد بهینه یک امر ثابت است. برای توسعه‌دهندگانی که از React استفاده می‌کنند، این تلاش منجر به اکوسیستم غنی از الگوها و ابزارها، از تقسیم کد و بارگذاری تنبل تا memoization و virtualization شده است. با این حال، یک چالش اساسی باقی مانده است: چگونه یک برنامه واقعاً درک کند که آیا یک کامپوننت نه تنها رندر شده است، بلکه در هر لحظه برای کاربر فعال و مرتبط است؟ تیم React در حال بررسی یک پاسخ قدرتمند به این سوال با یک ویژگی جدید و تجربی است: ردیاب فعالیت.

این API، از طریق یک کامپوننت experimental_Activity در دسترس است، نشان‌دهنده یک تغییر الگو از بررسی‌های ساده دید به یک مفهوم عمیق‌تر از "هوش کامپوننت" است. این یک روش بومی فریم ورک برای دانستن اینکه چه زمانی قسمت‌هایی از UI شما قابل مشاهده، پنهان یا در انتظار هستند، فراهم می‌کند و امکان کنترل بی‌سابقه‌ای بر مدیریت منابع و تجربه کاربر را فراهم می‌کند. این بررسی عمیق بررسی خواهد کرد که API فعالیت چیست، مشکلات پیچیده‌ای که قصد حل آنها را دارد، پیاده‌سازی عملی آن و تأثیر بالقوه آن بر ساخت برنامه‌های پرفورمنس برای یک پایگاه کاربری جهانی.

یک هشدار: همانطور که پیشوند 'experimental' نشان می‌دهد، این API پایدار نیست، برای استفاده در تولید در نظر گرفته نشده است و ممکن است تغییر کند. هدف آن جمع آوری بازخورد از جامعه برای شکل دادن به شکل نهایی آن است.

React's experimental_Activity چیست؟

در هسته خود، experimental_Activity یک کامپوننت React است که وضعیت فعالیت فرزندان خود را ردیابی می‌کند. برخلاف روش‌های سنتی که بر این تمرکز دارند که آیا یک کامپوننت روی DOM مانت شده است یا خیر، API فعالیت درک دقیق‌تر و معنایی‌تری از وضعیت یک کامپوننت در ادراک کاربر ارائه می‌دهد.

این در درجه اول سه حالت مجزا را ردیابی می‌کند:

• visible: محتوای کامپوننت برای کاربر قابل مشاهده و تعاملی در نظر گرفته شده است. این حالت 'فعال' است.
• hidden: محتوای کامپوننت در حال حاضر قابل مشاهده نیست (به عنوان مثال، در یک تب مرورگر غیرفعال است، بخشی از یک عنصر UI جمع شده است یا خارج از صفحه رندر شده است)، اما وضعیت آن حفظ شده است. در درخت React مانت باقی می‌ماند.
• pending: یک حالت انتقالی که نشان می‌دهد محتوا در حال آماده شدن برای نمایش است اما هنوز قابل مشاهده نیست. این برای پیش رندر کردن و اطمینان از انتقال صاف بسیار مهم است.

این API فراتر از منطق باینری مانت کردن و آنمانت کردن حرکت می‌کند. با نگه داشتن کامپوننت‌های «پنهان» مانت شده اما از وضعیت غیرفعال خود آگاه، می‌توانیم وضعیت کامپوننت (مانند ورودی‌های فرم یا موقعیت‌های اسکرول) را حفظ کنیم در حالی که مصرف منابع آنها را به میزان قابل توجهی کاهش می‌دهیم. این تفاوت بین خاموش کردن چراغ در یک اتاق خالی در مقابل تخریب اتاق و بازسازی آن هر بار که کسی وارد می‌شود است.

"چرا": حل چالش‌های عملکرد دنیای واقعی

برای درک واقعی ارزش API فعالیت، باید به چالش‌های عملکردی رایجی که توسعه‌دهندگان روزانه با آن مواجه هستند نگاه کنیم. بسیاری از راه حل‌های فعلی جزئی، پیچیده برای پیاده سازی یا دارای معایب قابل توجهی هستند.

1. فراتر از بارگذاری تنبل ساده

بارگذاری تنبل با React.lazy() و Suspense یک ابزار قدرتمند برای تقسیم کد است، اما در درجه اول یک بهینه‌سازی یک‌باره برای بارگذاری اولیه کامپوننت است. API فعالیت یک بهینه‌سازی پویا و مداوم‌تر را امکان‌پذیر می‌کند. یک داشبورد پیچیده با بسیاری از ویجت‌ها را تصور کنید. با React.lazy()، هنگامی که یک ویجت بارگذاری شد، در آنجا باقی می‌ماند. با API فعالیت، ویجتی که از دید خارج می‌شود می‌تواند به حالت «پنهان» منتقل شود، و به طور خودکار واکشی داده‌های بی‌درنگ و چرخه‌های رندر مجدد خود را متوقف کند تا زمانی که دوباره قابل مشاهده شود.

2. مدیریت منابع هوشمندتر در رابط‌های کاربری پیچیده

برنامه‌های وب مدرن اغلب برنامه‌های تک صفحه‌ای (SPA) با رابط‌های کاربری پیچیده مانند رابط‌های تب‌بندی شده، ویزاردهای چند مرحله‌ای یا نماهای کنار هم هستند. یک صفحه تنظیمات با چندین تب را در نظر بگیرید:

• روش قدیمی (رندر شرطی): {activeTab === 'profile' && <ProfileSettings />}. وقتی تب‌ها را عوض می‌کنید، کامپوننت ProfileSettings آنمانت می‌شود و تمام حالت خود را از دست می‌دهد. هر گونه تغییرات ذخیره نشده در یک فرم از بین می‌رود. وقتی برمی‌گردید، باید دوباره مانت شود و داده‌های خود را دوباره واکشی کند.
• روش CSS (display: none): پنهان کردن تب‌های غیرفعال با CSS آنها را مانت نگه می‌دارد و وضعیت را حفظ می‌کند. با این حال، کامپوننت‌ها هنوز 'زنده' هستند. یک تب پنهان حاوی یک نمودار با اتصال WebSocket همچنان به دریافت داده‌ها و فعال کردن رندر مجدد در پس‌زمینه ادامه می‌دهد و CPU، حافظه و منابع شبکه را بی‌دلیل مصرف می‌کند.
• روش API فعالیت: با پیچیدن محتوای هر تب در یک مرز <Activity>، تب‌های غیرفعال به حالت «پنهان» منتقل می‌شوند. سپس کامپوننت‌ها می‌توانند از یک هوک (مانند یک useActivity() فرضی) برای متوقف کردن جلوه‌های گران‌قیمت، اشتراک‌های داده و انیمیشن‌های خود استفاده کنند، در حالی که کاملاً وضعیت خود را حفظ می‌کنند. وقتی کاربر دوباره کلیک می‌کند، به حالت 'visible' منتقل می‌شوند و به طور یکپارچه به عملیات خود ادامه می‌دهند.

3. بهبود تجربه کاربری (UX)

عملکرد، سنگ بنای UX خوب است. API فعالیت می‌تواند مستقیماً آن را به چند طریق بهبود بخشد:

• مدیریت ظریف محتوا: یک کامپوننت حاوی یک ویدیو می‌تواند به طور خودکار پخش را متوقف کند وقتی که از دید خارج می‌شود یا در تب دیگری پنهان می‌شود و زمانی که دوباره قابل مشاهده می‌شود از سر گرفته شود.
• پیش رندر کردن و پر کردن کش‌ها: حالت 'pending' یک تغییر دهنده بازی است. هنگامی که یک کاربر در یک صفحه به پایین اسکرول می‌کند، برنامه می‌تواند تشخیص دهد که یک کامپوننت *در حال* قابل مشاهده شدن است. می‌تواند آن کامپوننت را به حالت 'pending' منتقل کند، و یک واکشی داده پیشگیرانه یا پیش رندر کردن محتوای پیچیده را فعال کند. زمانی که کامپوننت وارد viewport می‌شود، داده‌های آن از قبل در دسترس هستند، و منجر به یک نمایش فوری بدون اسپینرهای بارگذاری می‌شود.
• حفظ باتری و CPU: برای کاربرانی که از دستگاه‌های تلفن همراه یا لپ‌تاپ استفاده می‌کنند، کاهش پردازش پس‌زمینه برای عمر باتری بسیار مهم است. API فعالیت یک مبنای استاندارد برای ساخت برنامه‌های کم مصرف فراهم می‌کند، که یک ملاحظه مهم برای یک مخاطب جهانی با سخت‌افزارهای متنوع است.

مفاهیم اصلی و تجزیه API

API فعالیت در درجه اول از کامپوننت <Activity> تشکیل شده است، که به عنوان یک مرز عمل می‌کند، و یک مکانیسم برای کامپوننت‌های فرزند برای خواندن وضعیت فعالیت فعلی. بیایید API فرضی را بر اساس بحث‌ها و آزمایش‌های عمومی بررسی کنیم.

کامپوننت <Activity>

این کامپوننت wrapper است که وضعیت را برای بخشی از درخت UI شما مدیریت می‌کند. احتمالاً با یک prop برای کنترل رفتار آن استفاده می‌شود.

            
import { experimental_Activity as Activity } from 'react';

function MyTabPanel({ children, isActive }) {
  // Here, we'd need a way to tell the Activity component
  // whether it should be visible or hidden. This could be
  // integrated with a router or parent state.
  const mode = isActive ? 'visible' : 'hidden';

  return (
    <Activity mode={mode}>
      {children}
    </Activity>
  );
}

            

              
                Copy
              
            
          

prop mode مستقیماً حالتی را که به فرزندان منتقل می‌شود کنترل می‌کند. در یک سناریوی واقعی، این توسط کامپوننت‌های سطح بالاتر مانند روترها یا مدیران تب مدیریت می‌شود. به عنوان مثال، یک روتر مبتنی بر سیستم فایل می‌تواند به طور خودکار مسیرها را در کامپوننت‌های Activity بپیچد و حالت را برای مسیر فعال 'visible' و برای سایرین در پشته 'hidden' تنظیم کند.

هوک useActivity

برای مفید بودن کامپوننت <Activity>، فرزندان آن باید راهی برای دسترسی به حالت فعلی داشته باشند. این معمولاً با یک هوک مبتنی بر context به دست می‌آید، که می‌توانیم برای این بحث useActivity بنامیم.

            
import { useActivity } from 'react'; // Hypothetical import
import { useEffect, useState } from 'react';
import { fetchData } from './api';

function ExpensiveChart() {
  const activityState = useActivity(); // Returns 'visible', 'hidden', or 'pending'
  const [data, setData] = useState(null);

  const isVisible = activityState === 'visible';

  useEffect(() => {
    if (!isVisible) {
      // If the component is not visible, do nothing.
      return;
    }

    console.log('Component is visible, fetching data...');
    const subscription = fetchData(newData => {
      setData(newData);
    });

    // The cleanup function is crucial!
    // It will run when the component becomes hidden or unmounts.
    return () => {
      console.log('Component is no longer visible, unsubscribing...');
      subscription.unsubscribe();
    };
  }, [isVisible]); // The effect re-runs when visibility changes

  if (!isVisible) {
    // We can render a lightweight placeholder or nothing at all
    // while preserving the component's internal state (like `data`).
    return <div className="chart-placeholder">Chart is paused</div>;
  }

  return <MyChartComponent data={data} />;
}

            

              
                Copy
              
            
          

در این مثال، کامپوننت ExpensiveChart اکنون 'activity-aware' است. منطق اصلی آن - اشتراک داده - مستقیماً به وضعیت دید آن گره خورده است. هنگامی که مرز <Activity> والد آن را به عنوان 'hidden' علامت گذاری می‌کند، تابع cleanup هوک useEffect فعال می‌شود و از منبع داده لغو اشتراک می‌کند. هنگامی که دوباره 'visible' می‌شود، اثر دوباره اجرا می‌شود و اشتراک دوباره برقرار می‌شود. این فوق العاده قدرتمند و کارآمد است.

پیاده‌سازی عملی: ساخت با Activity

بیایید چند سناریوی عملی و دقیق را برای تحکیم درک خود از اینکه چگونه این API می‌تواند طراحی کامپوننت را متحول کند، بررسی کنیم.

مثال 1: یک کامپوننت واکشی داده هوشمندتر با Suspense

ادغام Activity با الگوهای واکشی داده React، مانند Suspense را تصور کنید. می‌توانیم یک کامپوننت ایجاد کنیم که فقط زمانی واکشی داده‌های خود را فعال می‌کند که در شرف قابل مشاهده شدن باشد.

            
import { experimental_Activity as Activity } from 'react';
import { useActivity } from 'react';
import { Suspense } from 'react';

// A utility to create a promise-based resource for Suspense
function createResource(promise) {
  let status = 'pending';
  let result;
  const suspender = promise.then(
    r => { status = 'success'; result = r; },
    e => { status = 'error'; result = e; }
  );
  return {
    read() {
      if (status === 'pending') throw suspender;
      if (status === 'error') throw result;
      if (status === 'success') return result;
    }
  };
}

let userResource;

function UserProfile() {
  const activityState = useActivity();

  if (activityState === 'pending' && !userResource) {
    // The component is about to become visible, let's start fetching!
    console.log('Pending state: Pre-fetching user data...');
    userResource = createResource(fetch('/api/user/123').then(res => res.json()));
  }

  if (activityState === 'hidden') {
    // When hidden, we can even release the resource if memory is a concern
    // userResource = null;
    return <p>User profile is currently hidden.</p>;
  }

  // When visible, we attempt to read the resource, which will suspend if not ready.
  const user = userResource.read();

  return (
    <div>
      <h3>{user.name}</h3>
      <p>Email: {user.email}</p>
    </div>
  );
}

// In your app
function App() {
  return (
    <SomeLayoutThatControlsActivity>
      <Suspense fallback={<h3>Loading profile...</h3>}>
        <UserProfile />
      </Suspense>
    </SomeLayoutThatControlsActivity>
  );
}

            

              
                Copy
              
            
          

این مثال قدرت حالت 'pending' را نشان می‌دهد. ما واکشی داده‌ها را *قبل از* اینکه کامپوننت کاملاً قابل مشاهده شود، آغاز می‌کنیم و به طور موثر تأخیر را از کاربر پنهان می‌کنیم. این الگو یک تجربه کاربری برتر را در مقایسه با نمایش یک اسپینر بارگذاری پس از ظاهر شدن کامپوننت روی صفحه ارائه می‌دهد.

مثال 2: بهینه‌سازی یک ویزارد فرم چند مرحله‌ای

در یک فرم طولانی و چند مرحله‌ای، کاربران اغلب بین مراحل به عقب و جلو می‌روند. آنمانت کردن مراحل قبلی به معنای از دست دادن ورودی کاربر است، که یک تجربه خسته کننده است. پنهان کردن آنها با CSS آنها را زنده نگه می‌دارد و به طور بالقوه منطق اعتبارسنجی گران‌قیمت را در پس‌زمینه اجرا می‌کند.

            
import { experimental_Activity as Activity } from 'react';
import { useState } from 'react';

// Assume Step1, Step2, Step3 are complex form components
// with their own state and validation logic (using useActivity internally).

function FormWizard() {
  const [currentStep, setCurrentStep] = useState(1);

  return (
    <div>
      <nav>
        <button onClick={() => setCurrentStep(1)}>Step 1</button>
        <button onClick={() => setCurrentStep(2)}>Step 2</button>
        <button onClick={() => setCurrentStep(3)}>Step 3</button>
      </nav>

      <div className="wizard-content">
        <Activity mode={currentStep === 1 ? 'visible' : 'hidden'}>
          <Step1 />
        </Activity>
        <Activity mode={currentStep === 2 ? 'visible' : 'hidden'}>
          <Step2 />
        </Activity>
        <Activity mode={currentStep === 3 ? 'visible' : 'hidden'}>
          <Step3 />
        </Activity>
      </div>
    </div>
  );
}

            

              
                Copy
              
            
          

با این ساختار، هر کامپوننت Step مانت باقی می‌ماند و وضعیت داخلی خود (ورودی کاربر) را حفظ می‌کند. با این حال، در داخل هر کامپوننت Step، توسعه‌دهندگان می‌توانند از هوک useActivity برای غیرفعال کردن اعتبارسنجی بی‌درنگ، جستجوهای API پویا (به عنوان مثال، برای اعتبارسنجی آدرس) یا سایر جلوه‌های گران‌قیمت زمانی که مرحله 'hidden' است استفاده کنند. این بهترین حالت را به ما می‌دهد: حفظ وضعیت و کارایی منابع.

Activity در مقابل راه حل‌های موجود: یک تحلیل مقایسه‌ای

برای درک کامل نوآوری در اینجا، مقایسه API فعالیت با تکنیک‌های موجود مورد استفاده توسعه‌دهندگان در سراسر جهان مفید است.

Activity در مقابل `Intersection Observer API`

• سطح انتزاع: `Intersection Observer` یک API مرورگر سطح پایین است که گزارش می‌دهد چه زمانی یک عنصر وارد viewport می‌شود یا آن را ترک می‌کند. این قدرتمند است اما 'غیر React-like'. این نیاز به مدیریت دستی observers، refs و cleanup دارد، که اغلب منجر به هوک‌های سفارشی پیچیده می‌شود. Activity یک React اولیه سطح بالا و اعلانی است که به طور یکپارچه در مدل کامپوننت ادغام می‌شود.
• معنای معنایی: `Intersection Observer` فقط دید هندسی را درک می‌کند (آیا در viewport است؟). Activity دید معنایی را در زمینه برنامه درک می‌کند. یک کامپوننت می‌تواند در viewport باشد اما همچنان توسط API فعالیت 'hidden' در نظر گرفته شود اگر در یک تب غیرفعال از یک گروه تب باشد. این زمینه سطح برنامه چیزی است که `Intersection Observer` کاملاً از آن آگاه نیست.

Activity در مقابل رندر شرطی ({condition && <Component />})

• حفظ وضعیت: این مهمترین تفاوت است. رندر شرطی کامپوننت را آنمانت می‌کند و وضعیت آن و گره‌های DOM زیربنایی را از بین می‌برد. Activity کامپوننت را در حالت 'hidden' مانت نگه می‌دارد و تمام وضعیت را حفظ می‌کند.
• هزینه عملکرد: در حالی که آنمانت کردن حافظه را آزاد می‌کند، هزینه مانت کردن مجدد، ایجاد مجدد DOM و واکشی مجدد داده‌ها می‌تواند بسیار زیاد باشد، به خصوص برای کامپوننت‌های پیچیده. رویکرد Activity از این سربار مانت/آنمانت اجتناب می‌کند و یک تجربه روان‌تر را برای رابط‌های کاربری که کامپوننت‌ها به طور مکرر جابجا می‌شوند ارائه می‌دهد.

Activity در مقابل جابجایی CSS (display: none)

• اجرای منطق: یک کامپوننت پنهان شده با CSS از نظر بصری از بین رفته است، اما منطق React آن همچنان به اجرا ادامه می‌دهد. تایمرها (`setInterval`)، listeners رویداد و هوک‌های `useEffect` همچنان اجرا می‌شوند و منابع را مصرف می‌کنند. یک کامپوننت در حالت 'hidden' یک Activity می‌تواند طوری برنامه‌ریزی شود که این منطق را متوقف کند.
• کنترل توسعه‌دهنده: CSS هیچ هوکی را در چرخه عمر کامپوننت ارائه نمی‌دهد. API فعالیت، از طریق هوک useActivity، کنترل صریح و دقیق‌تری را بر نحوه رفتار کامپوننت در هر حالت ('visible'، 'hidden'، 'pending') به توسعه‌دهنده می‌دهد.

تأثیر جهانی: چرا این برای یک مخاطب جهانی مهم است

پیامدهای API فعالیت فراتر از تنظیم دقیق عملکرد niche است. برای یک محصول جهانی، این مسائل اساسی دسترسی و برابری را حل می‌کند.

1. عملکرد در دستگاه‌های کم قدرت: در بسیاری از مناطق، کاربران از طریق دستگاه‌های تلفن همراه قدیمی‌تر و کم قدرت‌تر به وب دسترسی دارند. برای این کاربران، CPU و حافظه منابع گرانبهایی هستند. برنامه‌ای که به طور هوشمندانه کار پس‌زمینه را متوقف می‌کند نه تنها سریع‌تر است، بلکه قابل استفاده‌تر است. این از ایجاد UI نامنظم یا غیرپاسخگو جلوگیری می‌کند و از خراب شدن مرورگر جلوگیری می‌کند.

2. صرفه‌جویی در داده‌های تلفن همراه: داده‌ها می‌توانند گران باشند و اتصال شبکه در بسیاری از نقاط جهان غیرقابل اعتماد باشد. با جلوگیری از درخواست‌های شبکه غیرضروری توسط کامپوننت‌های پنهان، API فعالیت به کاربران کمک می‌کند تا در طرح‌های داده خود صرفه‌جویی کنند. پیش واکشی محتوا زمانی که یک کامپوننت 'pending' است نیز می‌تواند منجر به یک تجربه آفلاین یا 'lie-fi' (Wi-Fi غیرقابل اعتماد) قوی‌تر شود.

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

آینده و هشدار "تجربی"

ضروری است که تکرار کنیم که experimental_Activity نگاهی به آینده بالقوه React است. API نهایی ممکن است متفاوت به نظر برسد، یا این مفهوم ممکن است به روش دیگری ادغام شود. تیم React از این مرحله آزمایشی برای پاسخ دادن به سوالات کلیدی استفاده می‌کند:

• چگونه این باید با روترها (مانند React Router یا روتر Next.js) ادغام شود؟
• بهترین راه برای مدیریت مرزهای Activity تودرتو چیست؟
• این مفهوم چگونه با React Server Components و رندر همزمان تعامل دارد؟

نقش جامعه این است که با این API در پروژه‌های جانبی و محیط‌های غیرتولیدی آزمایش کند، نمونه‌های اولیه بسازد و بازخورد متفکرانه‌ای را در مخازن رسمی React یا RFCها (درخواست‌ها برای نظرات) ارائه دهد. این فرایند مشارکتی تضمین می‌کند که ویژگی نهایی و پایدار قوی، ارگونومیک و حل کننده مشکلات دنیای واقعی برای توسعه‌دهندگان در همه جا خواهد بود.

چگونه با experimental_Activity شروع کنیم

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

npm install react@experimental react-dom@experimental

یا با yarn:

yarn add react@experimental react-dom@experimental

پس از نصب، می‌توانید کامپوننت را همانطور که بحث شد وارد کرده و استفاده کنید:

import { experimental_Activity as Activity } from 'react';

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

نتیجه

ردیاب فعالیت تجربی React چیزی فراتر از یک ابزار بهینه‌سازی عملکرد دیگر است. این یک تغییر اساسی به سمت ساخت رابط‌های کاربری هوشمندتر و آگاه به زمینه است. این یک راه حل اعلانی و بومی React برای مشکل دیرینه مدیریت چرخه عمر کامپوننت‌ها فراتر از باینری ساده مانت شده یا آنمانت شده ارائه می‌دهد.

با دادن هوش به کامپوننت‌ها برای دانستن اینکه آیا آنها فعال، پنهان هستند یا در شرف فعال شدن هستند، API فعالیت مرز جدیدی از امکانات را باز می‌کند. ما می‌توانیم برنامه‌هایی بسازیم که نه تنها سریع‌تر هستند، بلکه از نظر منابع کارآمدتر، در شبکه‌های ضعیف انعطاف‌پذیرتر هستند و در نهایت، یک تجربه کاربری یکپارچه‌تر و لذت‌بخش‌تر را برای همه، صرف‌نظر از دستگاه یا موقعیت مکانی‌شان، ارائه می‌دهند. با تکامل این آزمایش، این می‌تواند به یک سنگ بنای توسعه مدرن React تبدیل شود و ما را قادر سازد تا نسل بعدی برنامه‌های وب واقعاً پرفورمنس را بسازیم.