Реагируйте на 18 новых функций

Новая функция: автоматическая пакетная обработка · Новая функция: переходы · Новые функции приостановки ·

Новое в React 18

Новые хуки

useId()
useTransition()
useDeferredValue()
useSyncExternalStore()

Новая функция

Автоматическая пакетная обработка
Переходы
Функции приостановки
Клиент React DOM

Новые хуки

1. useId — новый хук для генерации уникальных идентификаторов как на клиенте, так и на сервере.

```javascript

константный идентификатор = useId();

//useId генерирует строку

// поддерживает идентификаторPrefix для предотвращения коллизий в многокорневых приложениях.

1. useTransition/startTransition-(отметьте некоторые обновления состояния как несрочные)- вы можете установить приоритет обновлений состояния.

```javascript

const [ожидание, startTransition] = useTransition();

const [количество, setCount] = useState (0); startTransition (() => {

setCount (количество + 1);

// Делаем setCount менее срочным, чем другое обновление состояния

//isPending указывает, когда переход активен, чтобы показать состояние ожидания:

1. использовать отложенное значение

отложить повторный рендеринг несрочной части. похоже на устранение дребезга, но с некоторыми преимуществами по сравнению с ним.

он принимает значение и возвращает новую копию значения, которая будет отложена до более срочных обновлений.

Если текущий рендеринг является результатом срочного обновления, React вернет предыдущее значение, а затем отобразит новое значение после завершения срочного рендеринга.

```javascript

const deferredValue = useDeferredValue (значение);

Примечание. useDeferredValue откладывает только

значение, которое вы передаете ему. Если вы хотите предотвратить дочерний компонент

от повторного рендеринга во время срочного обновления, вы также должны запомнить этот компонент с помощью React.

памятка или React.useMemo

1. useSyncExternalStore (рекомендуется для чтения и подписки из внешних источников данных)

useSyncExternalStore предназначен для использования библиотеками, а не кодом приложения.

```javascript

const state = useSyncExternalStore (подписка, getSnapshot [, getServerSnapshot]);

// подписка: функция для регистрации обратного вызова, который вызывается при каждом изменении хранилища.

//getSnapshot: функция, которая возвращает текущее значение хранилища.

//getServerSnapshot: функция, которая возвращает снимок, используемый во время рендеринга сервера

Новая функция

Автоматическая дозировка-

Обновления внутри асинхронных действий (promises, setTimeout) по умолчанию не пакетировались в React. При автоматической пакетной обработке эти обновления будут группироваться автоматически.

Примечание. До этого пакетировались только события React. С этим обновлением — обновления внутри тайм-аутов, обещаний, // собственных обработчиков событий также будут пакетными.

```javascript

// Раньше: визуализировался дважды, по одному разу для каждого обновления состояния

setTimeout(() => {

setCount1(c1 => c1 + 1);

setCount2(c2 => c2 + 1);

}, 1000);

// После: повторный рендеринг только один раз в конце

setTimeout(() => {

setCount1(c1 => c1 + 1);

setCount2(c2 => c2 + 1);

}, 1000);

Переходы-

различать срочные и несрочные обновления

Срочные обновления — набор текста, клики, нажатия и т. д.

Обновления перехода переносят пользовательский интерфейс из одного представления в другое.

useTransition — для хуков

startTransition- для компонентов на основе классов

используйте startTransition API внутри вашего мероприятия, чтобы сообщить React, какие обновления являются срочными, а какие — переходами.

Например, введя несколько символов подряд, React выбросит устаревшую работу по рендерингу, которая не была завершена, и отобразит только последнее обновление.

```javascript

импортировать {startTransition} из «реагировать»;

// Срочный:

установитьInputValue (ввод);

// Отмечаем любые обновления состояния внутри как переходы

startTransition(() => {

установитьSearchedData(данные);

Особенности приостановки-

Добавлена ​​поддержка Suspense на сервере и расширены его возможности за счет параллельного рендеринга.

Клиент React DOM-

```javascript

До

импортировать ReactDOM из 'react-dom';

импортировать приложение из './App';

ReactDOM.render(, document.getElementById('app'));

После

импортировать ReactDOM из 'react-dom/client';

импортировать приложение из './App';

const root = ReactDOM.createRoot(document.getElementById('приложение'));

root.render(<Приложение />);

Примечание. createRoot() для гидратации контейнера, отображаемого сервером, не поддерживается. Вместо этого используйте hydrateRoot().

CreateRoot и hydrateRoot принимают новую опцию под названием onRecoverableError, если вы хотите получать уведомления, когда React устраняет ошибки во время рендеринга или гидратации для ведения журнала.

Счастливого обучения…👏👏👏👏