猿问

React-hot-loader 更新时组件状态丢失

我在使用 React-hot-loader 的过程中遇到一个问题,每次更新 React 组件的内部状态都会丢失。

具体的情况是这样的,在将其他配置工作做好以后,我按照使用教程在 .babelrc 文件中添加了这样一行代码:

"plugins": ["react-hot-loader/babel"],

完成上面工作以后运行 webpack-dev-server --hot --progress --env dev 命令。

这时我发现,当我修改了页面代码以后,xxx.hot-update.js 文件被添加到了 head 标签中,但是页面并没有发生任何变化,改动的地方没有被刷新,当然,React 组件的内部状态也没有发生任何变化。

然后我将上面 .babelrc 文件中的那行代码去掉,也就是不使用 React-hot-loader 提供的 Babel 插件。

然后运行 webpack-dev-server --hot --progress --env dev 命令。

此时,当我修改了页面代码以后,xxx.hot-update.js 文件同样被添加到了 head 标签中,页面改动的地方确实发生了变化,但是与此同时 React 组件的内部状态也丢失了!

我反复查看以后发现,此时的代码更新似乎是将 reactroot 这个元素整个替换掉了,而不是仅仅将有变化的组件单独更新!

上面两种情况的区别就是是否添加 "plugins": ["react-hot-loader/babel"], 这一行代码。

按照官方文档来说,这一行代码是一定要添加到 .babelrc 文件中的,但是我添加以后就出现了上面所说的第一种情况,迫不得已,我目前只能删掉这句代码,暂且让 React-hot-loader 将我的 reactroot 元素每次整体替换掉。

有没有同学有过类似的情况,烦请赐教,不胜感谢!

这里是项目的 webpack 配置信息:webpack.config.js


绝地无双
浏览 457回答 1
1回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答