Konkurrent Rejiminin API Arayışı (Eksperimental)

Bu səhifədə Konkurrent Rejiminin API arayışı göstərilir. Təlimatlı giriş axtarırsınızsa, Konkurrent UI Həlləri səhifəsinə baxın.

Qeyd: Bu sənəd cəmiyyət üçün İcmal rolunu daşıyır və ən son stabil versiya deyil. Bu səhifədəki API-lara gələcəkdə dəyişikliklər edilər bilər. Öz riskiniz ilə oxuyun!

• Konkurrent Rejimini Aktivləşdirmək

  • createRoot

• Suspense

  • Suspense
  • SuspenseList
  • useTransition
  • useDeferredValue

Konkurrent Rejimini Aktivləşdirmək

createRoot

ReactDOM.createRoot(rootNode).render(<App />);

ReactDOM.render(<App />, rootNode) çağırışını əvəz edərək Konkurrent Rejimin aktivləşdirir.

Konkurrent Rejimi haqqında əlavə məlumat üçün Konkurrent Rejimi sənədlərinə baxın.

Suspense API

Suspense

<Suspense fallback={<h1>Yüklənir...</h1>}>
  <ProfilePhoto />
  <ProfileDetails />
</Suspense>

Suspense, komponentlərin render olunmamışdan öncə “gözləməsinə” imkan yaradır və gözləmə zamanı fallback göstərir.

Bu nümunədə ProfileDetails komponenti məlumat yükləyən asinxron API sorğusunun cavabını gözləyir. ProfileDetails və ProfilePhoto komponentlərinin gözləndiyi müddətdə Yüklənir... fallback-i göstəriləcək. Nəzərinizə çatdırmaq istəyirik ki, <Suspense>-in daxilində olan bütün komponentlər yüklənməyənə kimi fallback göstəriləcək.

Suspense komponenti iki prop qəbul edir:

• fallback propu yükləmə göstərici üçündürdür. Bu fallback, Suspense komponentinin bütün uşaqları yüklənənə kimi göstərilir.
• unstable_avoidThisFallback propu bulin dəyər qəbul edir. Bu, React-ə ilkin yükləmə zamanı bu sərhədi göstərməməsini bildirir. Bu propun gələcək buraxılışlarda silinməsi şansı çoxdur.

<SuspenseList>

<SuspenseList revealOrder="forwards">
  <Suspense fallback={'Yüklənir...'}>
    <ProfilePicture id={1} />
  </Suspense>
  <Suspense fallback={'Yüklənir...'}>
    <ProfilePicture id={2} />
  </Suspense>
  <Suspense fallback={'Yüklənir...'}>
    <ProfilePicture id={3} />
  </Suspense>
  ...
</SuspenseList>

SuspenseList komponenti dayandırıla bilən komponnetlərin göstərilmə sırasını orkestrasiya etməyə imkan yaradır.

Bir neçə komponent fərqli məlumatları yükləmək istədikdə sorğu cavabları fərqli zamanlarda gələ bilər. Lakin, bu elementləri SuspenseList ilə əhatə etdikdə əvvəlki elementlər hazır olmayana kimi sonrakı elementlər göstərilməyəcək (bu sıranı dəyişmək mümkündür).

SuspenseList komponenti iki prop qəbul edir:

• revealOrder (forwards, backwards, together) propu ilə SuspenseList uşaqlarının hansı sıra ilə göstəriləcəyi təyin edilir.

  • together prop dəyəri komponentlərin bir-bir göstərilməsi əvəzinə hamısını birdən göstərilməsini bildirir.

• tail (collapsed, hidden) propu ilə SuspenseList-də olan elementlərin necə göstəriləcəyi təyin edilir.

  • Normalda, SuspenseList, siyahıda olan bütün fallback-ləri göstərəcək.
  • collapsed dəyəri yalnız sonrakı fallback-i göstərməyi bildirir.
  • hidden dəyəri təyin edildikdə yüklənməkdə olan komponentlərin fallback-ləri gizlədiləcək.

Nəzərə alın ki, SuspenseList yalnız ən yaxın Suspense və SuspenseList uşaqlarına təsir edir. Bu komponent bir səviyyədən aşağıda olan sərhədləri axtarmır. Lakin, qrid düzəltmək SuspenseList komponentlərini bir-birinin daxilində render etmək mümkündür.

useTransition

const SUSPENSE_CONFIG = { timeoutMs: 2000 };

const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);

useTransition Hooku ilə yeni ekrana keçməmişdən öncə kontenti gözləyərək istənilməyən yükləmə vəziyyətlərindən qaçınmaq mümkündür. Bu, komponentlərə sonrakı render etmələr olana kimi yavaş yüklənən məlumat yükləməsi yeniliklərini gecikdirərək vacib yenilikləri dərhal render etməyə imkan yaradır.

useTransition Hooku iki elementli massiv qaytarır.

• Callback qəbul edən startTransition funksiyası ilə React-ə hansı state-i gecikdirməyi bildiririk.
• isPending bulin dəyəri keçidin proqresdə olduğunu bildirir.

Əgər hər hansı bir state yeniliyi ilə komponent dayandırılırsa, bu state yeniliyini keçid ilə əhatə etmək tövsiyyə olunur.

const SUSPENSE_CONFIG = { timeoutMs: 2000 };

function App() {
  const [resource, setResource] = useState(initialResource);
  const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
  return (
    <>
      <button
        disabled={isPending}
        onClick={() => {
          startTransition(() => {
            const nextUserId = getNextId(resource.userId);
            setResource(fetchProfileData(nextUserId));
          });
        }}
      >
        Sonrakı
      </button>
      {isPending ? " Yüklənir..." : null}
      <Suspense fallback={<Spinner />}>
        <ProfilePage resource={resource} />
      </Suspense>
    </>
  );
}

Bu nümunədə, biz məlumat yükləməsini startTransition ilə əhatə etdik. Bu, profaylı dərhal yükləməyə imkan yaradaraq sonrakı profayl səhifəsinin və bu səhifə ilə əlaqəli Spinner komponentinin render edilməsini 2 saniyə (timeoutMs-də təyin edilən vaxt) gecikdirir.

isPending bulini React-ə komponentin keçiddə olduğunu bildirir. Biz bu dəyər ilə əvvəlki profayl səhifəsində yükləmə göstərici göstərə bilərik.

Keçidlər haqqında ətraflı məlumat üçün Konkurrent UI Həlləri səhifəsinə baxın.

useTransition Konfiqurasiyası

const SUSPENSE_CONFIG = { timeoutMs: 2000 };

useTransition Hooku timeoutMs parametri ilə fakultativ Suspense konfiqurasiyası obyekti qəbul edir. Bu vaxt dəyəri (millisaniyə ilə) ilə React-ə sonrakı ekrana (yuxarıdakı nümunədə göstərilən yeni Profayl Səhifəsi) keçməyi nə qədər gözləməsini bildiririk.

Qeyd: Biz Suspense Konfiqurasiyasını fərqli modullar arasında paylaşmağı tövsiyyə edirik.

useDeferredValue

const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });

Dəyərin ən çox timeoutMs qədər gecikən versiyasını qaytarır.

Bu, istifadəçi interaksiyası əsasında dərhal render edilən məlumat və məlumat yükləməsi zamanı gözlənilən məlumat olduqda interfeysi responsiv saxlamaq üçün istifadə edilir.

Bunun üçün yaxşı nümunə anket sahəsidir.

function App() {
  const [text, setText] = useState("salam");
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); 

  return (
    <div className="App">
      {/* Cari dəyəri anket sahəsinə göndərin */}
      <input value={text} onChange={handleChange} />
      ...
      {/* Lakin, siyahı lazım olduqda əsl dəyərdən "gec" gələ bilər */}
      <MySlowList text={deferredText} />
    </div>
  );
 }

Biz bu şəkildə input sahəsinin dəyərini dərhal göstərərək səhifənin responsiv olduğunu hiss etdirə bilərik. Eyni zamanda render etmənin baş verməsi üçün MySlowList komponenti timeoutMs parametri əsasında yeniləməni 2 saniyə gecikdirərək cari mətn dəyəri fonda render edir.

Dəyərlərin gecikdirilməsi haqqında əlavə məlumat üçün Konkurrent UI Həlləri səhifəsinə baxın.

useDeferredValue Konfiqurasiyası

const SUSPENSE_CONFIG = { timeoutMs: 2000 };

useDeferredValue Hooku timeoutMs parametri ilə fakultativ Suspense konfiqurasiyası obyekti qəbul edir. Bu vaxt dəyəri (millisaniyə ilə) React-ə dəyərin nə qədər gecikdirilməsinə imkan verməsini bildirir.

Şəbəkə və ya istifadəçi qurğusu icazə verdikdə React gecikməni qısaltmağa çalışacaq.