【问题标题】：Fast refresh in react native always fully reload the appreact native 中的快速刷新总是完全重新加载应用程序
【发布时间】：2020-12-26 12:25:23
【问题描述】：

这个问题已经在这里被问过好几次了（here the most relevant,Another example），但是没有一个提出解决方案。所以我有两个问题要问你们：

知道为什么它不能在大型项目中工作吗？我的意思是，与项目大小或他包含的包相关的快速刷新是否存在任何已知问题会导致快速刷新停止工作？有什么办法可以解决吗？
是否有一种方便的方法可以在不使用快速刷新的情况下在应用中编辑内部页面（无需独立运行页面，因为它取决于应用的所有逻辑）？

这个bug真的让我的开发非常困难，我很难相信专业的开发人员没有找到解决这个问题的方法，请帮助！

我正在使用 expo-cli(v3.26.2 - Expo SDK 38 使用 react-native v0.62)

【问题讨论】：

你用的是什么模拟器？
android studio 4.0.1 , Pixel 2 Android 10+
你尝试了一些不同的模拟器吗？例如 nexus5x - 它对我来说是完美的......显然，如果您在应用程序中更改诸如路线之类的东西，例如它会完全重新加载，但更改文本或其他东西应该总是快速刷新
看不到模拟器如何快速刷新。也在我的物理设备上尝试过，但快速刷新不起作用

标签： react-native hot-reload expo fast-refresh

【解决方案1】：

TLDR;

使用没有名称的默认导出总是会导致应用完全重新加载而无需热重新加载！

详情

所以在痛苦了好几个月之后，我无意中发现了一个足够奇怪的效果：我通常用这种语法编写我的反应组件：

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

由于某种原因，更改以这种方式导出的模块总是会导致应用完全重新加载，而无需热重新加载！

经过几个月的痛苦，我偶然发现将导出更改为：

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

export default Test;

完全解决了这个问题，现在热重载工作得非常好！
我没有在网上看到一个地方提到过这种效果！

【讨论】：

这对我也有用。我不明白的是，我使用的是没有名称的默认导出，没有任何问题，但在某些时候，它开始在每次保存时重新加载应用程序。我尝试如上所述命名该组件，果然它可以工作......这肯定有别的东西，但这对我现在有很大帮助。感谢您发布解决方案！
我没有亲自阅读过它，但the docs describing how Fast Refresh 的作品可能会帮助您理解为什么会发生这种行为。尤其是在“工作原理”部分。
这为我解决了（在尝试了一些其他棘手的东西之后）-我有一个屏幕（使用 React Navigation）是默认导出的组件，并且快速刷新不起作用-我一恢复就恢复了像其他屏幕一样，将此语法转为export const MyScreenName = () => {}！
@jaquinocode 不，如果您真的“亲自阅读”，您会意识到该部分中没有提到与此答案中提到的行为直接相关的任何内容。
@Hugo 我也在使用 React Navigation，这个修复也对我有用。也许 React Navigation 的工作方式与这种行为有关。

【解决方案2】：

来自react-refresh-webpack-plugin疑难解答部分

未命名/非帕斯卡命名的组件

请参阅此推文，了解不提供组件专有名称的缺点。它们是不可能支持的，因为我们没有办法静态地确定它们与 React 相关。这个问题也存在于其他 React 开发者工具，例如 hooks ESLint 插件。内部的 HOC 中的组件也必须符合此规则。

// Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}

【讨论】：

【解决方案3】：

还有另一种方法可以获得这种奇怪的行为。导出简单函数时：

//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 那样显示修改..

但是当您考虑问题时，我们不应该从应用的入口点导出多个内容。这听起来很奇怪不是吗？

【讨论】：

This section 将有助于更好地解释为什么会发生这种情况。

【解决方案4】：

TLDR;

在开发过程中，我遇到了无限“刷新...”消息的问题。以及“unknow resolve module 2”和“bundle error...”等难以理解的错误

详情

结果出乎意料，我在主 index.js 文件中将“require()”更改为“import”

之前

const module = require('some-module')

之后

import module from 'some-module';

【讨论】：