Полное руководство по использованию React Fast Refresh
Мое путешествие
Создавая демонстрацию на основе приложения Create React для статьи среднего размера, я заметил кое-что неожиданное: когда я редактировал исходный код, мое приложение обновлялось, но мое состояние сохранялось. Я ожидал, что мое состояние будет сброшено, как будто я миллион раз работал над другими проектами. Я был сбит с толку и подумал, что мое приложение на самом деле не перезагружается должным образом. Но когда я копался дальше, я обнаружил, что это захватывающая новая функция.
Реагировать на быстрое обновление
Эта новая функциональность, с которой я столкнулся, называется React Fast Refresh. Это последняя версия горячей перезагрузки React. При редактировании компонента React React Fast Refresh будет эффективно обновлять и повторно отображать только этот компонент. Это приводит к значительно более быстрому времени горячей перезагрузки. Кроме того, React Fast Refresh сохранит состояние компонента во время повторного рендеринга, поэтому вам не нужно будет снова создавать тот же сценарий вручную. Эти «быстрые» и безболезненные повторные рендеры обеспечивают превосходный опыт разработчиков, делая цикл обратной связи между изменением и результатом значительно более эффективным.
Создать React-приложение
Начиная с версии 4.x, приложение Create React по умолчанию включает React Fast Refresh. Если ваш проект построен на основе приложения Create React, все, что вам нужно сделать, это обновить его.
Пользовательский веб-пакет
Если в вашем проекте используется пользовательская конфигурация Webpack вместо Create React App, включить React Fast Refresh по-прежнему очень просто. Сначала установите библиотеки react-refresh и @pmmmwh/react-refresh-webpack-plugin. react-refresh содержит базовые инструменты, необходимые для поддержки горячей перезагрузки React Fast Refresh, и react-refresh-webpack-plugin представляет собой подключаемый модуль Webpack, необходимый для включения react-refresh.
Затем добавьте плагин react-refresh/babel Babel в файл конфигурации Babel.
// babel.config.js
module.exports = function babel(api) {
const BABEL_ENV = api.env();
const presets = [...];
const plugins = [...];
if (BABEL_ENV === 'development') {
plugins.push('react-refresh/babel');
}
return {
presets,
plugins,
};
};
и добавьте плагин react-refresh-webpack-plugin в файл конфигурации Webpack.
// webpack.config.js
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
...
plugins: [
new ReactRefreshWebpackPlugin(),
],
};
Кроме того, вы можете указать подключаемый модуль Babel непосредственно в конфигурации Webpack вместо файла конфигурации Babel.
// webpack.config.js
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
...
plugins: [
new ReactRefreshWebpackPlugin(),
],
module: {
rules: [
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: ['react-refresh/babel'],
},
},
],
},
};
Вот и все — теперь у вас должен быть включен новейший и лучший загрузчик горячей перезагрузки, который React может предложить для вашего проекта!
Отключение
Сохранение состояния — это здорово, но могут быть случаи, когда вы не хотите сохранять состояние. React Fast Refresh поддерживает это с помощью комментария // @refresh reset. Если компонент редактируется и этот комментарий присутствует где-то в файле, React Fast Refresh принудительно перемонтирует компонент, что приведет к сбросу состояния компонента.
Если вы обнаружите, что постоянно добавляете этот комментарий или сталкиваетесь с некоторыми из ограничений, обсуждаемых ниже, вы можете принять радикальный подход и не использовать React Fast Refresh all. Приложение Create React предоставляет флаг FAST_REFRESH, чтобы отключить его и использовать старую горячую перезагрузку. Это можно сделать, запустив FAST_REFRESH=false npm start или добавив FAST_REFRESH=false в файл .env. Если вы используете свой собственный веб-пакет, просто удалите изменения конфигурации, упомянутые выше.
Ограничения
К сожалению, у React Fast Refresh есть некоторые ограничения. Если React Fast Refresh не может определить, какие компоненты React нужно обновить, он сделает все возможное и вернется к полной перезагрузке. Этот случай может возникнуть, если вы используете безымянные/анонимные и не-PascalCased компоненты React, потому что React Fast Refresh не может статически определить, связан ли код с React.
Полная перезагрузка также произойдет, если вы редактируете файлы, которые в конечном итоге приводят к root, даже если какой-то код в файле связан с React. React Fast Refresh не может гарантировать горячую перезагрузку контента, не связанного с React, поэтому предполагает, что это невозможно.
Кроме того, сохранение состояния React Fast Refresh не работает для компонентов класса — оно работает только с функциональными компонентами и хуками. Предыдущие итерации горячей перезагрузки работали для компонентов класса, но делали это небезопасно, что потенциально могло привести к некорректному неожиданному поведению. React Fast Refresh фокусируется на безопасности, поэтому в настоящее время он не поддерживает компоненты класса.
Пререлиз
На момент написания этой статьи react-refresh и @pmmmwh/react-refresh-webpack-plugin были версиями до v1, поэтому могут возникнуть проблемы. Сказав это, команда Facebook достаточно уверена в этих библиотеках, чтобы включить их по умолчанию в Create React App 4.x. Для меня одного этого достаточно, чтобы начать использовать его в своих проектах.
Последние мысли
Узнав о React Fast Refresh, я интегрировал его во все свои проекты. Это сделало разработку намного более эффективной за счет разумной горячей перезагрузки только при необходимости и сохранения состояния приложения. Теперь мои изменения отражаются в пользовательском интерфейсе быстрее, и он автоматически находится в том же состоянии, что и раньше. Несмотря на некоторые ограничения, я не столкнулся с какими-либо фундаментальными проблемами, и, что еще хуже, он ведет себя точно так же, как горячий релоадер предыдущего поколения. React Fast Refresh — достойный преемник существующей горячей перезагрузки React.
