v19.2Latest

Введение

React Compiler — это новый инструмент для этапа сборки, который автоматически оптимизирует ваше React-приложение. Он работает с обычным JavaScript, понимаетПравила React, поэтому вам не нужно переписывать код, чтобы его использовать.

Вы узнаете
  • Что делает React Compiler
  • Начало работы с компилятором
  • Стратегии постепенного внедрения
  • Отладка и устранение неполадок, когда что-то идёт не так
  • Использование компилятора в вашей React-библиотеке

Что делает React Compiler?

React Compiler автоматически оптимизирует ваше React-приложение на этапе сборки. React часто достаточно быстр и без оптимизаций, но иногда вам приходится вручную мемоизировать компоненты и значения, чтобы приложение оставалось отзывчивым. Эта ручная мемоизация утомительна, её легко сделать неправильно, и она добавляет лишний код для поддержки. React Compiler делает эту оптимизацию за вас автоматически, освобождая вас от этой умственной нагрузки, чтобы вы могли сосредоточиться на создании функций.

До React Compiler

Без компилятора вам нужно вручную мемоизировать компоненты и значения для оптимизации повторных рендеров:

Примечание

В этой ручной мемоизации есть тонкая ошибка, которая нарушает мемоизацию:

Несмотря на то чтоhandleClickобёрнут вuseCallback, стрелочная функция() => handleClick(item)создаёт новую функцию при каждом рендере компонента. Это означает, чтоItemвсегда будет получать новый пропсonClick, что нарушает мемоизацию.

React Compiler способен правильно оптимизировать это как со стрелочной функцией, так и без неё, гарантируя, чтоItemперерендеривается только при измененииprops.onClick.

После React Compiler

С React Compiler вы пишете тот же код без ручной мемоизации:

Посмотрите этот пример в React Compiler Playground

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

Deep Dive
Какую мемоизацию добавляет React Compiler?

Стоит ли попробовать компилятор?

Мы призываем всех начать использовать React Compiler. Хотя компилятор сегодня по-прежнему является дополнительной опцией для React, в будущем некоторые функции могут требовать компилятор для полноценной работы.

Безопасно ли его использовать?

React Compiler теперь стабилен и был тщательно протестирован в продакшене. Хотя он использовался в продакшене в таких компаниях, как Meta, развертывание компилятора в продакшене для вашего приложения будет зависеть от состояния вашей кодовой базы и того, насколько хорошо вы следовалиПравилам React.

Какие инструменты сборки поддерживаются?

React Compiler можно установить черезнесколько инструментов сборки, таких как Babel, Vite, Metro и Rsbuild.

React Compiler — это в основном легкая обертка в виде плагина Babel вокруг основного компилятора, который был разработан для отделения от самого Babel. Хотя первоначальная стабильная версия компилятора останется в основном плагином Babel, мы работаем с командами swc иoxc, чтобы создать первоклассную поддержку React Compiler, чтобы вам не пришлось добавлять Babel обратно в ваши конвейеры сборки в будущем.

Пользователи Next.js могут включить React Compiler, вызываемый через swc, используяv15.3.1и выше.

Что делать с useMemo, useCallback и React.memo?

По умолчанию React Compiler будет мемоизировать ваш код на основе своего анализа и эвристик. В большинстве случаев эта мемоизация будет такой же точной или даже более точной, чем то, что вы могли написать.

Однако в некоторых случаях разработчикам может потребоваться больше контроля над мемоизацией. ХукиuseMemo и useCallbackмогут продолжать использоваться с React Compiler в качестве аварийного выхода для контроля над тем, какие значения мемоизируются. Распространенный вариант использования этого — если мемоизированное значение используется как зависимость эффекта, чтобы гарантировать, что эффект не срабатывает повторно, даже когда его зависимости не меняются существенно.

Для нового кода мы рекомендуем полагаться на компилятор для мемоизации и использоватьuseMemo/useCallbackтам, где это необходимо для достижения точного контроля.

Для существующего кода мы рекомендуем либо оставить существующую мемоизацию на месте (её удаление может изменить результат компиляции), либо тщательно протестировать перед удалением мемоизации.

Попробуйте React Compiler

Этот раздел поможет вам начать работу с React Compiler и понять, как эффективно использовать его в ваших проектах.

Дополнительные ресурсы

В дополнение к этой документации мы рекомендуем ознакомиться сРабочей группой React Compilerдля получения дополнительной информации и обсуждения компилятора.

上一篇React Compiler下一篇Установка