Быстрое обновление в React Native всегда полностью перезагружает приложение

Этот вопрос задавался здесь несколько раз ( здесь наиболее актуальный, Другой пример), но ни в одном из них не было предложено никакого решения. Итак, у меня есть 2 вопроса к вам, ребята:

  1. Есть идеи, почему это не сработает в большом проекте? Я имею в виду, есть ли какие-либо известные проблемы с быстрым обновлением, связанные с размером проекта или пакетами, которые он включает, которые заставят быстрое обновление перестать работать? Есть способ исправить?
  2. Есть ли удобный способ редактировать внутреннюю страницу в приложении без использования быстрого обновления (без независимого запуска страницы, поскольку это зависит от всей логики приложения)?

Эта ошибка действительно сильно усложняет мне разработку, и мне трудно поверить, что профессиональные разработчики не нашли способ решить эту проблему. Пожалуйста, помогите!

Я использую expo-cli(v3.26.2 - Expo SDK 38, который использует react-native v0.62)

Источник

4 ответа

Решение

TL; DR;

использование экспорта по умолчанию без имени ВСЕГДА приводило к полной перезагрузке приложения без горячей перезагрузки!

Подробности

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

      export default ({ ...props }) => {
  ...
};

и по какой-то причине изменение модуля, который экспортирует таким образом, ВСЕГДА приводило к полной перезагрузке приложения без горячей перезагрузки!

после нескольких месяцев боли я случайно обнаружил, что изменение экспорта на:

      const Test = ({ ...props }) => {
  ...
};

export default Test;

полностью исправил проблему, и теперь горячая перезагрузка работает отлично!
Я не видел ни одного упоминания об этом эффекте в Интернете!

Источник

Есть другой способ добиться такого странного поведения. Когда вы экспортируете простую функцию:

      //if we export this function in the entry file of the app,
//it will break the hot reload feature without any warnings.
export function someName() {
};

из входного файла вашего приложения (с шаблоном машинописного текста expo init nameApp файл - App.tsx) Это точно произведет полную перезагрузку приложения, а не горячую перезагрузку.

Это порочно, потому что в симуляторе ios он полностью перезагружает приложение без модификации, тогда как в Android он полностью перезагружает приложение с модификацией. Итак, вам потребуется время, чтобы понять, что это не горячая перезагрузка в Android, а полная перезагрузка.

IDK, почему ios не отображает модификацию, как android ..

Но когда вы думаете о проблеме, нам не следует экспортировать несколько вещей из точки входа приложения. Звучит странно, не правда ли?

Источник

Из раздела устранения неполадок response-refresh-webpack-plugin

Компоненты без имени / без имени в паскаль-регистре

См. Этот твит, чтобы узнать о недостатках отсутствия собственных имен компонентов. Их невозможно поддерживать, потому что у нас нет способов статически определить, что они связаны с React. Эта проблема также существует для других инструментов разработчика React, таких как плагин hooks ESLint. Внутренние компоненты в HOC также должны соответствовать этому правилу.

      // Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}
Источник

TLDR;

Во время разработки у меня была ваша проблема с бесконечным сообщением «Обновление ...». А также непонятные ошибки типа "неизвестный модуль разрешения 2" и "ошибка пакета..."

Подробности

решение оказалось неожиданным, я изменил "require()" на "import" в основном файле index.js

до

      const module = require('some-module')

после

      import module from 'some-module';
Источник
Другие вопросы по тегам