React Native 中的快速刷新始终完全重新加载应用程序
Fast refresh in react native always fully reload the app
这个问题在这里被问了好几次(here the most relevant,Another example)，但是都没有提出解决方案。所以我有两个问题要问你们：
- 知道为什么它在大型项目中不起作用吗？我的意思是，与项目大小或他包含的包相关的快速刷新有任何已知问题会使快速刷新停止工作吗？有什么办法可以解决吗？
- 有没有一种方便的方法可以在不使用快速刷新的情况下编辑应用程序的内部页面（不用 运行 独立页面，因为它取决于应用程序的所有逻辑）？
这个bug真的让我的开发很困难，我很难相信专业的开发人员没有找到解决这个问题的方法，请帮忙！
我正在使用 expo-cli（v3.26.2 - 使用 react-native v0.62 的 Expo SDK 38）
TLDR;
使用没有名称的默认导出总是导致应用程序完全重新加载而没有热重新加载！
详情
于是折腾了好几个月，无意中发现了一个够奇葩的效果：
我通常用这种语法编写我的反应组件：
export default ({ ...props }) => {
...
};
并且出于某种原因，更改以这种方式导出的模块总是会导致应用程序完全重新加载，而无需热重新加载！
经过几个月的痛苦，我无意中发现将导出更改为：
const Test = ({ ...props }) => {
...
};
export default Test;
完全解决了这个问题，现在热重载工作得很好！
我在网上没有看到一个地方提到这个效果！
来自react-refresh-webpack-plugin 故障排除部分
Un-named/non-pascal-case-named components
See this tweet for drawbacks of not giving component proper names.
They are impossible to support because we have no ways to statically
determine they are React-related. This issue also exist for other
React developer tools, like the hooks ESLint plugin. Internal
components in HOCs also have to conform to this rule.
// Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}
还有另一种方法可以获得这种奇怪的行为。
导出简单函数时：
//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 那样显示修改..
但是当你想到这个问题时，我们不应该从一个应用程序的入口点导出多个东西。这听起来很奇怪，不是吗？
TLDR;
在开发过程中，我遇到了无限“正在刷新...”消息的问题。以及不可理解的错误，如“未知解析模块 2”和“捆绑错误...”
详情
结果出乎意料，我在主index.js文件中将“require()”更改为“import”
之前
const module = require('some-module')
之后
import module from 'some-module';
这个问题在这里被问了好几次(here the most relevant,Another example)，但是都没有提出解决方案。所以我有两个问题要问你们：
- 知道为什么它在大型项目中不起作用吗？我的意思是，与项目大小或他包含的包相关的快速刷新有任何已知问题会使快速刷新停止工作吗？有什么办法可以解决吗？
- 有没有一种方便的方法可以在不使用快速刷新的情况下编辑应用程序的内部页面（不用 运行 独立页面，因为它取决于应用程序的所有逻辑）？
这个bug真的让我的开发很困难，我很难相信专业的开发人员没有找到解决这个问题的方法，请帮忙！
我正在使用 expo-cli（v3.26.2 - 使用 react-native v0.62 的 Expo SDK 38）
TLDR;
使用没有名称的默认导出总是导致应用程序完全重新加载而没有热重新加载！
详情
于是折腾了好几个月，无意中发现了一个够奇葩的效果： 我通常用这种语法编写我的反应组件：
export default ({ ...props }) => {
...
};
并且出于某种原因，更改以这种方式导出的模块总是会导致应用程序完全重新加载，而无需热重新加载！
经过几个月的痛苦，我无意中发现将导出更改为：
const Test = ({ ...props }) => {
...
};
export default Test;
完全解决了这个问题，现在热重载工作得很好！
我在网上没有看到一个地方提到这个效果！
来自react-refresh-webpack-plugin 故障排除部分
Un-named/non-pascal-case-named components
See this tweet for drawbacks of not giving component proper names. They are impossible to support because we have no ways to statically determine they are React-related. This issue also exist for other React developer tools, like the hooks ESLint plugin. Internal components in HOCs also have to conform to this rule.
// Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}
还有另一种方法可以获得这种奇怪的行为。 导出简单函数时：
//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 那样显示修改..
但是当你想到这个问题时，我们不应该从一个应用程序的入口点导出多个东西。这听起来很奇怪，不是吗？
TLDR;
在开发过程中，我遇到了无限“正在刷新...”消息的问题。以及不可理解的错误，如“未知解析模块 2”和“捆绑错误...”
详情
结果出乎意料，我在主index.js文件中将“require()”更改为“import”
之前
const module = require('some-module')
之后
import module from 'some-module';