Установка

Это руководство поможет вам установить и настроить React Compiler в вашем React-приложении.

Предварительные требования

React Compiler разработан для оптимальной работы с React 19, но также поддерживает React 17 и 18. Подробнее осовместимости версий React.

Установка

Установите React Compiler какdevDependency:

npm install -D babel-plugin-react-compiler@latest

Или с помощью Yarn:

yarn add -D babel-plugin-react-compiler@latest

Или с помощью pnpm:

pnpm install -D babel-plugin-react-compiler@latest

Базовая настройка

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

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

Babel

Создайте или обновите ваш файлbabel.config.js:

Vite

Если вы используете Vite, вы можете добавить плагин в vite-plugin-react:

В качестве альтернативы, если вы предпочитаете отдельный плагин Babel для Vite:

npm install -D vite-plugin-babel

Next.js

Пожалуйста, обратитесь кдокументации Next.jsдля получения дополнительной информации.

React Router

Установитеvite-plugin-babelи добавьте в него плагин Babel компилятора:

npm install vite-plugin-babel

Webpack

Загрузчик Webpack от сообществатеперь доступен здесь.

Expo

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

Metro (React Native)

React Native использует Babel через Metro, поэтому обратитесь к разделуИспользование с Babelдля инструкций по установке.

Rspack

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

Rsbuild

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

Интеграция с ESLint

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

Установите плагин ESLint:

npm install -D eslint-plugin-react-hooks@latest

Если вы еще не настроили eslint-plugin-react-hooks, следуйтеинструкциям по установке в readme. Правила компилятора доступны в пресетеrecommended-latest.

Правило ESLint будет:

• Выявление нарушенийПравил React
• Показ компонентов, которые нельзя оптимизировать
• Предоставление полезных сообщений об ошибках для исправления проблем

Проверка вашей настройки

После установки убедитесь, что React Compiler работает корректно.

Проверка React DevTools

Компоненты, оптимизированные React Compiler, будут отображать значок «Memo ✨» в React DevTools:

1. Установите расширение для браузераReact Developer Tools
2. Откройте ваше приложение в режиме разработки
3. Откройте React DevTools
4. Ищите эмодзи ✨ рядом с именами компонентов

Если компилятор работает:

• Компоненты будут отображать значок «Memo ✨» в React DevTools
• Затратные вычисления будут автоматически мемоизированы
• Ручное использованиеuseMemoне требуется

Проверка вывода сборки

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

Устранение неполадок

Отказ от оптимизации конкретных компонентов

Если компонент вызывает проблемы после компиляции, вы можете временно отказаться от его оптимизации с помощью директивы"use no memo":

Это указывает компилятору пропустить оптимизацию для этого конкретного компонента. Вам следует исправить основную проблему и удалить директиву после её решения.

Для получения дополнительной помощи по устранению неполадок см.руководство по отладке.

Следующие шаги

Теперь, когда у вас установлен React Compiler, узнайте больше о:

• Совместимости версий Reactдля React 17 и 18
• Параметрах конфигурациидля настройки компилятора
• Стратегиях постепенного внедрениядля существующих кодовых баз
• Методах отладкидля устранения проблем
• Руководстве по компиляции библиотекдля компиляции вашей React-библиотеки