React Fast Refresh

React Fast Refresh является преемником React Hot Loader. Он полностью поддерживается командой React и первоначально был выпущен вместе с React Native 0.6.1 в 2019 году.

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

Почему же React Fast Refresh

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

Вот заявление, которое можно найти в репозитории React Hot Loader, которое суммирует это и подготавливает почву для быстрого обновления:

React-Hot-Loader has been your friendly neighbour, living outside of React. But it has been limiting its powers and causing not the greatest experience. It’s time to make a next step.

React Fast Refresh призван решить все эти проблемы и обеспечить гораздо лучший опыт разработки с надежной Hot Module Replacement за счёт сохранения точного состояния компонентов между перезагрузками с использованием более интеллектуального API.

Из чего он состоит

React Fast Refresh опирается на сочетание следующих технологий:

• React Renderer 16.9.0+;
• react-refresh/runtime;
• react-refresh/babel babel плагин;
• Hot module replacement включена в бандлере (Webpack и т. Д.).

Это означает, что он не может работать с предыдущими версиями React, такими как React 15, например.

Как это работает

Некоторые ключевые моменты:

• он будет повторно рендерить компонент React, когда мы редактируем модуль, который экспортирует только компоненты React;
• перезагрузит все компоненты React, которые импортируют не-React модуль и сам модуль, когда мы его редактируем;
• выполнит полную перезагрузку, когда мы редактируем модуль вне дерева React;
• продолжит работать, как только мы исправим синтаксис или ошибку во время выполнения без перезагрузки вручную;
• для function components и Hooks будет сохранено локальное состояние;
• локальное состояние не будет сохранено для class components.

Если есть желание - можешь прочесть подробное объяснение в React Native docs.

Create React App

В настоящее время CRA использует Webpack API Hot Module Replacement для применения быстрых обновлений и полной перезагрузки страницы, когда это невозможно. При внимательном осмотре react-dev-utils можно увидеть, как весь этот механизм работает под капотом.

CRA скоро будет поддерживать React Fast Refresh в качестве экспериментальной функции. Единственное, что нам нужно сделать, это явно установить переменную окружения с именем FAST_REFRESH в файле .env:

FAST_REFRESH=true

На самом деле всё, что осталось до его официального включения в будущие выпуски CRA, - это решить некоторые проблемы, которые до сих пор остаются в пакете Webpack.

Под капотом используется плагин @pmmmwh/react-refresh-webpack-plugin. Так что React Fast Refresh может работать, но определенно есть то, что нужно сделать, как упомянуто в репозитории:

First - this plugin is not 100% stable. It works pretty reliably, and we have been testing it for some time, but there are still edge cases yet to be discovered. Please DO NOT use it if you cannot afford to face breaking changes in the future.

Вот почему Fast Refresh будет считаться экспериментальной функцией в течение следующих месяцев и будет включена в CRA с использованием FAST_REFRESH.

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

На момент написания этой статьи некоторые изменения, касающиеся Fast Refresh, уже были внесены в документы CRA в основной ветке.