9

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

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

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

4

2 回答 2

14

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

它将 Webpack热模块替换(HMR) 与 React 结合在一起。

如果出现以下情况，您可以使用它：

  • 你的 React 组件没有讨厌的副作用；
  • 您愿意为模块切换到 Webpack（切换并不难，请参阅演练）；
  • 您有几个小时的空闲时间（如果您已经使用 Webpack，则为几分钟）。

这个怎么运作：

  • 它使用 Webpack HMR API 来了解“模块更新可用”事件。
  • 它将React.createClass调用更改为存储组件原型的特殊函数createClass和updateClass函数，然后用新版本更新它；
  • 当所有原型都更新后，它会调用forceUpdate重新渲染组件。

有一个演示视频、一个解释性博客文章和一个配置了实时编辑的 React 教程应用程序分支。

这都是香草JS。

于 2014-07-24T22:19:51.587 回答
1

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

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

基本步骤是：

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

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

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

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

你可以在这里看到一个示例项目： https ://github.com/ORESoftware/hr4R

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

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

Webpack 主要不是为热重载而设计的——如果是这样的话，热重载将不再是一个实验性的特性，也不会使用轮询来查看文件系统差异，这是它目前所做的（参见我的文章）。

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

于 2015-09-20T01:05:48.753 回答