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

Быстрое обновление — это функция React Native, которая позволяет получать почти мгновенную обратную связь для изменений в ваших React-компонентах. Быстрое обновление включено по умолчанию, и вы можете переключить «Включить быстрое обновление» в меню разработчика React Native. При включенном быстром обновлении большинство правок должны отображаться в течение секунды или двух.

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

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

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

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

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

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

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

Ограничения

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

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

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

Советы

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

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

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

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

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

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