我可以在不重新加载浏览器的情况下编辑 React 组件吗？

Posted 2023-02-22

【中文标题】我可以在不重新加载浏览器的情况下编辑 React 组件吗？

【英文标题】：Can I edit React components without reloading the browser?

【发布时间】：2014-09-16 16:10:21

【问题描述】：

如果 React 提供 DOM 协调，是否可以在我编辑后动态重新加载组件的代码并重新渲染它？

我正在寻找一种解决方案，它允许我编辑 JSX 文件、保存它并让组件在浏览器中自行更新，而无需重新加载页面、卸载页面或丢失其状态。

理想情况下，这应该在没有浏览器插件的情况下工作。

【参考方案1】：

您可以使用 react-hot-loader，这是一个插入式 Webpack 加载程序，可以在您的项目中实时编辑 React 组件。无需浏览器插件或 IDE 挂钩。

它将 Webpack Hot Module Replacement (HMR) 与 React 结合起来。

您可以在以下情况下使用它：

您的 React 组件没有令人讨厌的副作用； 您愿意为模块切换到 Webpack（切换不难，see the walkthrough）； 您有几个小时的空闲时间（如果您已使用 Webpack，则为几分钟）。

它是如何工作的：

它使用 Webpack HMR API 来了解“模块更新可用”事件。 它将React.createClass 调用更改为store the component's prototype and later update it with fresh version 的特殊createClass 和updateClass 函数； 当所有原型都更新后，它会调用forceUpdate 重新渲染组件。

有一个demo video、一个explanatory blog post和一个React tutorial app fork with live-edit configured。

而且都是普通的 JS。

【讨论】：

你可以用丹的方式用 Webpack 来做。如果您正在使用 RequireJS / AMD 并想开始使用 React，我为 RequireJS + React 创建了一个 DIY 热重载解决方案，请参阅我的答案

【参考方案2】：

你可以，我创建了一个示例项目，演示如何使用 ES5 和 RequireJS 为自己创建这些设施 - 它适用于 React 和 Backbone - 只要你使用 AMD，它可能适用于 Angular 和 Ember 等模块和 RequireJS。

以下是所有信息： https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1

基本步骤是：

gulp.js 观察者监听文件系统变化

gulpfile 中的 socket.io 服务器向所有浏览器客户端发送一条消息，其中包含更改的文件路径

客户端删除代表该文件/模块的缓存，并重新请求它（使用 AJAX 从服务器文件系统中提取它）

前端应用程序配置/设计为 重新评估所有对它希望的模块的引用 hot-reload，在这种情况下，只有 JS 视图、模板和 CSS 是 可用于热重载 - 路由器、控制器、数据存储 尚未配置。我确实怀疑所有文件都可以热重新加载，唯一的例外是数据存储。

您可以在此处查看示例项目： https://github.com/ORESoftware/hr4R

但我建议先阅读上面的文章。

与使用 Babel/ES6 和 React-Hot-Loader 相比，这是一种更简单的 DIY 热重载实现。

Webpack 最初并不是为热重载而设计的——如果是的话，热重载将不再是一项实验性功能，也不会像目前那样使用轮询来查看文件系统差异（参见我的文章）。

RequireJS / AMD 规范基本上是为热重载而制定的，如果您考虑一下的话。