رندر ناهمزمان با React – وبلاگ ماکسیم هکل

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

روشی جدید برای ساخت کامپوننت ها

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

1
import React, { Component, Fragment } from 'react';
3
class ClassicAsync extends Component {
6
    this.state = { loading: false, title: null };
10
    fetch('https://jsonplaceholder.typicode.com/todos/')
11
      .then((response) => response.json())
12
      .then((json) => this.setState({ loading: false, data: json }));
15
  renderList = (data) => {
19
          li style={{ listStyle: 'none' }} key={item.id}>
28
    const { loading, data } = this.state;
32
        h2 style={{ textAlign: 'center' }}>
33
          {`React: ${React.version} Demo`}
35
        {loading ? 'Classic loading placeholder' : this.renderList(data)}
41
export default ClassicAsync;

تعلیق چگونه این را تغییر می دهد؟ خوب، در واقع، اگر کد بالا را با موارد زیر مقایسه کنید، بسیار زیاد است:

1
import React, { Suspense, Fragment } from 'react';
4
const getDate = () => Fetcher.read();
7
  const data = getData();
11
        li style={{ listStyle: 'none' }} key={item.id}>
21
    h2>{`React: ${React.version} Demo`}/h2>
22
    Suspense fallback={div>Loading.../div>}>

همانطور که با این مثال می بینیم: دیگر کلاس نیست! Suspense وضعیت بارگذاری را برای ما از طریق مدیریت می کند fallback تکیه گاه که به List برای رندر آماده است، یعنی زمانی که فراخوانی ناهمزمان وابسته حل شود و داده ها را برمی گرداند. با این حال، این تنها یک مثال جزئی است. همانطور که در قسمت اول گفته شد، رندر از List در این مثال متوقف شده است هنگام بارگیری داده ها از حافظه نهان، که چیست Fetcher عملکرد همه چیز است.

این کلید کارکرد مثال بالا است. بخش ذخیره برای Suspense برای خواندن داده ها از تماس async ضروری است.
قبل از اینکه به جزئیات بپردازیم، بیایید به چگونگی آن نگاه کنیم Fetcher تابع برای مثال ما پیاده سازی شده است:

1
import { unstable_createResource } from 'react-cache';
3
const Fetcher = unstable_createResource(() =>
4
  fetcher('https://jsonplaceholder.typicode.com/todos').then((r) => r.json())

برای این پست از کش واکنشگرا استفاده کردم. این بسته ای است که توسط تیم اصلی React ایجاد شده است که یک کش اولیه فراهم می کند می رود برای ذخیره داده های ناهمزمان، مانند داده هایی که پس از رفع تماس واکشی دریافت می کنیم و به ما اجازه می دهد تا به صورت ناهمزمان به این داده ها دسترسی داشته باشیم. در قطعه کد بالا، ما اساسا استفاده می کنیم unstable_createResource تابعی که در آن فراخوانی ناهمزمان خود را ارسال می کنیم که یک کش را مقداردهی اولیه کرده و داده های دریافتی را در آن ذخیره می کند. این داده ها از حافظه نهان از طریق read عملکرد همانطور که در آن می بینیم قطعه کد 2. با این حال، این روش ذخیره سازی در حال حاضر برای استفاده در تولید در نظر گرفته نشده است (تیم React این موضوع را کاملاً در README این مخزن برجسته کرده است).

مثال کامل

در اینجا نمونه کامل این مقاله آمده است:

1
import React, { Suspense, Fragment } from 'react';
2
import { unstable_createResource } from 'react-cache';
4
const Fetcher = unstable_createResource(() =>
5
  fetcher('https://jsonplaceholder.typicode.com/todos').then((r) => r.json())
8
const getDate = () => Fetcher.read();
11
  const data = getData();
15
        li style={{ listStyle: 'none' }} key={item.id}>
25
    h2>{`React: ${React.version} Demo`}/h2>
26
    Suspense fallback={div>Loading.../div>}>

من این نمونه را در یک مخزن Github بر اساس آن در دسترس قرار داده ام create-react-app بنابراین می توانید خیلی سریع با Suspense امتحان کنید و آزمایش کنید!

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

بعدش چی بخونم؟
اگر می‌خواهید درباره React یا توسعه frontend اطلاعات بیشتری کسب کنید، می‌توانید مقالات زیر را بررسی کنید: