问题描述
这里已经多次问过这个问题(here the most relevant,Another example),但是在任何一个中都没有提出解决方案。所以我有两个问题要问你们:
- 有人知道为什么它不能在大型项目中工作吗?我的意思是,快速刷新是否存在与项目或他所包含的软件包的大小有关的已知问题,这些问题会使快速刷新停止工作?有什么办法可以解决?
- 是否有一种方便的方法可以在不使用快速刷新的情况下在应用程序中编辑内部页面(无需独立运行页面,因为它取决于应用程序的所有逻辑)?
此错误确实使开发工作对我来说真的很困难,我很难相信专业开发人员尚未找到解决此问题的方法,请帮忙!
我正在使用expo-cli(v3.26.2-使用react-native v0.62的Expo SDK 38)
解决方法
来自 react-refresh-webpack-plugin 疑难解答部分
未命名/非 pascal-case 命名的组件
有关不提供组件专有名称的缺点,请参阅此推文。 他们是不可能支持的,因为我们没有办法静态地 确定它们与 React 相关。这个问题也存在于其他 React 开发者工具,比如 hooks ESLint 插件。内部的 HOC 中的组件也必须符合此规则。
// Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}
,
TLDR;
使用不带名称的默认导出总是会导致应用程序完全重载而不会热重载!
详细信息
因此,经过几个月的痛苦,我无意间发现了一种奇怪的效果: 我通常使用以下语法编写我的react组件:
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 那样显示修改..
但是当您考虑这个问题时,我们不应该从应用程序的入口点导出多个内容。这听起来很奇怪是不是?