През март 2022 г. екипът на React обяви официалното пускане на React 18. Тази версия дойде с множество нови функции, насочени към подобряване на производителността, въз основа на концепцията за „едновременно изобразяване“. Идеята зад едновременното изобразяване е да направи процеса на изобразяване в DOM прекъсваем.

Сред новите функции са пет куки: useId, useTransition, useDerredValue, useSyncExternalStore и useInsertionEffect.

Реагирайте, използвайте Transition Hook

По подразбиране всички актуализации на състоянието на React са спешни. Различните актуализации на състоянието във вашето приложение се конкурират за едни и същи ресурси, забавяйки го. Използването Transition Кука за реакция решава този проблем, като ви позволява да маркирате някои актуализации на състоянието като неспешни. Това позволява спешните актуализации на състоянието да прекъсват тези с по-нисък приоритет.

Компонентът SearchPage

Тази проста програма имитира търсачка, която актуализира две състояния – поле за въвеждане и някои резултати от търсенето.

instagram viewer
внос {useState} от "реагира";
функцияСтраница за търсене() {
const [input, setInput] = useState("")
const [списък, setList] = useState([]);

const listSize = 30000

функцияhandleChange(д) {
setInput(д.цел.стойност);
const списъчни елементи = [];

за (позволявам i = 0; i < listSize; i++){
ListItems.натиснете(д.цел.стойност);
}

setList (listItems);
}

връщане (
<раздел>
<етикет>Търси в мрежата: </label>
<тип вход="текст" value={input} onChange={handleChange} />

{списък.map((елемент, индекс) => {
връщане <div ключ={индекс}>{вещ}</div>
})}
</div>
);
}
износпо подразбиране Страница за търсене;

Актуализираният компонент на приложението

внос Страница за търсене от "./Components/SearchPage";

функцияап() {
връщане (
<раздел>
< Страница за търсене/>
</div>
);
}

износпо подразбиране Приложение;

Кодът по-горе изобразява React приложение с поле за въвеждане:

Когато започнете да въвеждате знаци в полето, по-долу ще се появят 30 000 копия от въведения текст:

Ако въведете няколко знака в бърза последователност, трябва да забележите забавяне. Влияе на времето, необходимо за появата на знаците както в полето за въвеждане, така и в „областта на резултатите от търсенето“. Това е така, защото React изпълнява и двете актуализации на състоянието едновременно.

Ако демонстрацията работи твърде бавно или твърде бързо за вас, опитайте да настроите listSize стойност съответно.

Вмъкването на куката useTransition в приложението ще ви позволи да дадете приоритет на една актуализация на състоянието пред другата.

Използване на useTransition Hook

внос {useState, useTransition} от "реагира";

функцияСтраница за търсене() {
const [isPending, startTransition] = useTransition();
const [input, setInput] = useState("")
const [списък, setList] = useState([]);

const listSize = 30000

функцияhandleChange(д) {
setInput(д.цел.стойност);
startTransition(() => {
const списъчни елементи = [];

за (позволявам i = 0; i < listSize; i++){
ListItems.натиснете(д.цел.стойност);
}

setList (listItems);
});
}

връщане (
<раздел>
<етикет>Търси в мрежата: </label>
<тип вход="текст" value={input} onChange={handleChange} />

{isPending? "... Резултатите се зареждат": list.map((елемент, индекс) => {
връщане <div ключ={индекс}>{вещ}</div>
})}
</div>
);
}

износпо подразбиране Страница за търсене;

Актуализиране на вашия Страница за търсене компонент с кода по-горе ще даде приоритет на полето за въвеждане пред „областта на резултатите от търсенето“. Тази проста промяна има ясен ефект: трябва незабавно да започнете да виждате текста, който въвеждате в полето за въвеждане. Само „областта на резултатите от търсенето“ все още ще има леко забавяне. Това се дължи на startTransitionинтерфейс за програмиране на приложения (API) от куката useTransition.

Кодът, който изобразява резултатите от търсенето в потребителския интерфейс, сега използва startTransition API. Това позволява на полето за въвеждане да прекъсне актуализирането на състоянието на резултатите от търсенето. Когато чака() функцията показва „...Зареждане на резултата“, това показва, че се извършва преход (от едно състояние в следващо).

Реагирайте useDeferredValue Hook

Куката useDeferredValue ви позволява да отложите повторното изобразяване на актуализация на състоянието без принуда. Подобно на куката useTransition, куката useDeferredValue е кука за паралелност. Куката useDeferredValue позволява на състоянието да запази първоначалната си стойност, докато е в преход.

Компонентът SearchPage с куката useDeferredValue().

внос { useState, useTransition, useDeferredValue } от "реагира";

функцияСтраница за търсене() {

const [,startTransition] = useTransition();
const [input, setInput] = useState("")
const [списък, setList] = useState([]);

const listSize = 30000

функцияhandleChange(д) {
setInput(д.цел.стойност);
startTransition(() => {
const списъчни елементи = [];

за (позволявам i = 0; i < listSize; i++){
ListItems.натиснете(д.цел.стойност);
}

setList (listItems);
});
}
const deferredValue = useDeferredValue (вход);
връщане (
<раздел>
<етикет>Търси в мрежата: </label>
<тип вход="текст" value={input} onChange={handleChange} />

{списък.map((елемент, индекс) => {
връщане <div ключ={index} input={deferredValue} >{вещ}</div>
})}
</div>
);
}

износпо подразбиране Страница за търсене;

В кода по-горе ще видите, че чака() функцията вече не съществува. Това е така, защото на deferredValue променлива от куката useDeferredValue заменя чака() функция по време на преход на състояние. Вместо списъкът с резултати от търсенето да се опреснява, когато въведете нов знак, той ще запази старите си стойности, докато приложението актуализира състоянието.

Реагирайте useSyncExternalStore Hook

За разлика от куките useTransition и useDeferredValue, които работят с код на приложението, useSyncExternalStore работи с библиотеки. Той позволява на вашето приложение React да се абонира и да чете данни от външни библиотеки. Куката useSyncExternalStore използва следната декларация:

const състояние = useSyncExternalStore (абонирайте се, getSnapshot[, getServerSnapshot]);

Този подпис съдържа следното:

  • състояние: стойността на хранилището за данни, което куката useSyncExternalStore връща.
  • Абонирай се: регистрира обратно повикване, когато се промени съхраняването на данни.
  • getSnapshot: връща текущата стойност на хранилището за данни.
  • getServerSnapshot: връща моментната снимка, използвана по време на изобразяване на сървъра.

С useSyncExternalStore можете да се абонирате за цяло хранилище на данни или конкретно поле в рамките на хранилище за данни.

Реагирайте с помощта на InsertionEffect Hook

Куката useInsertionEffect е друга нова кука React, която работи с библиотеки. Въпреки това, вместо хранилища за данни, куката useInsertionEffect работи с библиотеки CSS-in-JS. Тази кука адресира проблеми с производителността при изобразяване на стил. Той стилизира DOM преди да прочете оформлението в куката useLayoutEffect.

Реагирайте useId Hook

Използвате куката useId в ситуации, които изискват уникални идентификатори (с изключение на ключове в списък). Основната му цел е да генерира идентификатори, които остават уникални за клиента и сървъра, избягвайки грешката при несъответствие на хидратацията на React сървъра. Куката useId използва следната декларация:

const id = useId()

В декларацията документ за самоличност е уникален низ, който включва : жетон. След деклариране можете да преминете документ за самоличност променлива директно към елемента(ите), които се нуждаят от него.

Каква стойност добавят тези нови куки за реакция?

Куките useTransition и useDeferredValue са куки за код на приложението. Чрез едновременно изобразяване те подобряват производителността на приложенията. Куката useId се справя с грешката при несъответствие на хидратацията, като създава уникални идентификатори в клиент и сървър.

Куките useSyncExternalStore и useInsertionEffect работят с външни библиотеки, за да улеснят едновременното изобразяване. Куката useInsertionEffect работи с CSS-in-JS библиотеки. Куката useSyncExternalStore работи с библиотеки за съхранение на данни като Redux store.

Заедно тези куки дават значителен тласък на производителността, което от своя страна подобрява потребителското изживяване.