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

Question

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

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

理想情况下，这应该可以在没有浏览器插件的情况下使用。

Answer 1

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

它将Webpack Hot Module Replacement（HMR）与React结合在一起。

如果符合以下条件，您可以使用此功能：

• 您的React组件没有令人讨厌的副作用;
• 你愿意切换到Webpack的模块（切换并不困难，see the walkthrough）;
• 您有几个小时（如果您已经使用过Webpack，则需要几分钟）。

工作原理：

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

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

这都是香草JS。