我可以在不重新加載瀏覽器的情況下編輯React組件嗎？

Question

如果React提供DOM協調， 是否可以動態重新加載組件的代碼並在編輯后重新呈現它？

我正在尋找一種解決方案，允許我編輯JSX文件，保存它，並讓組件在瀏覽器中自行更新，無需重新加載頁面，卸載它或丟失其狀態。

理想情況下，這應該沒有瀏覽器插件。

Answer 1

您可以使用react-hot-loader ，這是一個嵌入式Webpack加載器，可以為項目中的React組件進行實時編輯。 無需瀏覽器插件或IDE掛鈎。

它將Webpack 熱模塊替換 （HMR）與React結合在一起。

你可以使用這個：

• 你的React組件沒有令人討厭的副作用;
• 你願意切換到Webpack的模塊（切換並不難， 參見演練 ）;
• 你有幾個小時（如果你已經使用Webpack，則需要幾分鍾）。

這個怎么運作：

• 它使用Webpack HMR API來了解“模塊更新可用”事件。
• 它將React.createClass調用更改為特殊的createClass和updateClass函數， updateClass函數存儲組件的原型，然后用新版本更新它 ;
• 更新所有原型后，它會調用forceUpdate重新渲染組件。

有一個演示視頻 ，一個解釋性博客文章和一個React教程應用程序分叉，配置了實時編輯 。

這都是香草JS。

Answer 2

您可以，我創建了一個示例項目，演示如何使用ES5和RequireJS為自己創建這些工具 - 它可以與React和Backbone一起使用 - 只要您使用AMD模塊和RequireJS，它就可以與Angular和Ember等一起使用。

以下是所有信息： 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規范基本上是用於熱重新加載的。