React v17 热刷新 不起作用

Posted 2021-06-21 GoldenaArcher

React v17 热刷新 不起作用

起因是在参加了活动 我的 Serverless 实战 — 使用 formio 快速搭建表单类应用 后想要继续系统性的过一遍 formio 这个工具，突然发现，starter kit 热部署没办法做到自动刷新。

使用的工具是 VSC (Visual Studio Code)，在 Idea 家族里面需要手动勾选热加载什么的，但是 VSC 没有这个情况，所以首先可以排除这个可能性。

接下来，我以为 CRA (create-react-app) 脚手架的热部署没有绑定上，所以想试着用 react-hot-loader 去绑定热部署。跟着教程走了一遍，显示是用 react-app-rewire-hot-loader 修改 CRA 的 babel 配置。

折腾了一番后，出现了奇怪的报错信息：被 react-hot-loader 这个高阶组件返回的子元素不是一个合法的子元素。

然后又发现，其实刷新的时候，console 是有更新的，页面却没有更新。如果 热部署(hot deployment) 没有绑定上，那么应该是需要 ctrl+c 暂停进程重启项目，这个问题更像是 热刷新(hot refresh) 失败了。

再仔细看了一下 starter kit 的 package.json，发现比较重大的版本更新：

"dependencies": {
    "react": "^17.0.1",
    "react-scripts": "4.0.2"
}

解决方案

网上找了几个答案，其中有一个来自 Stack Overflow 的答案描述了 React v17 以后会发生的这种情况：

I was reading a lot of unnecesary stuff.

I am using React 17.

And my probrem was that the page just add new components but the browser was not refreshing the page.

If your terminal is Compiling... and then you don’t see changes on the browser, you should try adding a .env file in the root path of the project and add FAST_REFRESH=false.

Hot refresh was replaced for Fast refresh by default.

原问题：Development server of create-react-app does not auto refresh

跟着答案在根目录下创建了一个 .env 文件，写入 FAST_REFRESH=false 即可正常刷新。

原因是：

CRA 4 uses Fast Refresh instead of Hot Reload, the page doesn’t reload on file changes.

中文：

CRA 4 使用 Fast Refresh 代替了 Hot Reload，页面不会因为文件变化而重载。

来自 Hot Reload stopped working with React “^17.0.1” #9904

根据整个 thread 来说，目前 Fast Refresh 会根据组件的状态变化而重新加载页面，但是除了组件之外的变化——例如说一些 伪数据的变化和 index.js 的变化——不会引起页面的重载。

以及，根据状态显示，4 月 13 号这个问题已经修复了，即他们在 CRA 的配置文件里面添加了 FAST_REFRESH=false 这一行。

---

与 2021 年 5 月 19 日更新，刚刚使用了 CRA 创建了一个初始化项目，热更新还是无法工作，建议还是使用上面的解决方案，在根目录下创建 .env 文件，新增以下内容：

FAST_REFRESH=false