Быстрое обновление¶

Fast Refresh — это функция React Native, которая позволяет вам получать практически мгновенный отклик на изменения в ваших компонентах React. По умолчанию функция Fast Refresh включена, и вы можете переключить "Enable Fast Refresh" в React Native Dev Menu. При включенном Fast Refresh большинство правок должны быть видны в течение одной-двух секунд.

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

Если вы редактируете модуль, который только экспортирует React-компонент(ы), Fast Refresh обновит код только для этого модуля и заново отобразит ваш компонент. Вы можете редактировать в этом файле все, что угодно, включая стили, логику рендеринга, обработчики событий или эффекты.
Если вы редактируете модуль с экспортом, который не является React-компонентом, Fast Refresh запустит заново и этот модуль, и другие модули, импортирующие его. Так, если Button.js и Modal.js импортируют Theme.js, редактирование Theme.js обновит оба компонента.
Наконец, если вы редактируете файл, который импортирован модулями вне дерева React, Fast Refresh возвращается к полной перезагрузке. У вас может быть файл, который рендерит компонент React, но также экспортирует значение, которое импортируется не React-компонентом. Например, ваш компонент экспортирует константу, а модуль утилиты не из React импортирует ее. В таком случае, подумайте о переносе константы в отдельный файл и импортировании ее в оба файла. Это восстановит работу Fast Refresh. Другие случаи обычно решаются аналогичным образом.

Устойчивость к ошибкам¶

Если вы допустили синтаксическую ошибку во время сеанса Fast Refresh, вы можете исправить ее и сохранить файл снова. Красная рамка исчезнет. Модули с синтаксическими ошибками не будут запущены, поэтому вам не придется перезагружать приложение.

Если вы допустили ошибку во время инициализации модуля (например, набрали Style.create вместо StyleSheet.create), сеанс Fast Refresh продолжится, как только вы исправите ошибку. Красная рамка исчезнет, и модуль будет обновлен.

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

Если в вашем приложении есть error boundaries (что является хорошей идеей для изящных отказов в производстве), они будут повторять попытку рендеринга при следующем редактировании после redbox. В этом смысле наличие границ ошибок может предотвратить постоянный вылет на экран корневого приложения. Однако помните, что границы ошибок не должны быть слишком гранулированными. Они используются в React в производстве, и их всегда следует проектировать намеренно.

Ограничения¶

Fast Refresh пытается сохранить локальное состояние React в редактируемом компоненте, но только если это безопасно. Вот несколько причин, по которым вы можете увидеть, что локальное состояние сбрасывается при каждом редактировании файла:

Локальное состояние не сохраняется для компонентов класса (только компоненты функций и Hooks сохраняют состояние).
Модуль, который вы редактируете, может иметь другие экспорты в дополнение к компоненту React.
Иногда модуль экспортирует результат вызова компонента более высокого порядка, например createNavigationContainer(MyScreen). Если возвращаемый компонент является классом, состояние будет сброшено.

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

Советы¶

Fast Refresh по умолчанию сохраняет локальное состояние React в компонентах функций (и хуках).
Иногда вы можете захотеть принудительно сбросить состояние и перемонтировать компонент. Например, это может быть удобно, если вы настраиваете анимацию, которая происходит только при монтировании. Для этого вы можете добавить // @refresh reset в любом месте редактируемого файла. Эта директива является локальной для файла и указывает Fast Refresh перемонтировать компоненты, определенные в этом файле, при каждом редактировании.

Быстрое обновление и хуки¶

Когда это возможно, Fast Refresh пытается сохранить состояние вашего компонента между правками. В частности, useState и useRef сохраняют свои предыдущие значения до тех пор, пока вы не измените их аргументы или порядок вызовов хуков.

Хуки с зависимостями — такие как useEffect, useMemo и useCallback — будут всегда обновляться во время Fast Refresh. Их список зависимостей будет игнорироваться, пока происходит Fast Refresh.

Например, когда вы измените useMemo(() => x * 2, [x]) на useMemo(() => x * 10, [x]), он будет запущен заново, даже если x (зависимость) не изменилась. Если бы React не делал этого, ваша правка не отразилась бы на экране!

Иногда это может привести к неожиданным результатам. Например, даже useEffect с пустым массивом зависимостей все равно будет повторно запущен один раз во время Fast Refresh. Однако написание кода, устойчивого к случайному повторному запуску useEffect, является хорошей практикой даже без Fast Refresh. Это облегчает последующее внедрение в него новых зависимостей.