摘要：然而配合服務器的實現局部刷新，同時更新端的代碼并非易事。如下介紹一種可行的實施方案適用于可有可無。如果在開發模式下，有更完善的服務器渲染熱加載的解決方案，歡迎大家積極貢獻

原文鏈接

前言

hot reload分析

react靜態資源熱加載分析

react服務器配置分析

待解決

總結

由react客戶端渲染的前端界面配合webpack-dev-server, react-hot-loader很容易實現前端開發過程中的局部刷新。然而配合node服務器的react-isomorphic實現局部刷新，同時更新client, server端的代碼并非易事。
如下介紹一種可行的實施方案：

適用于 koa2, react-hot-loader3, react-router可有可無。
Demo代碼地址：https://github.com/lanjingling0510/blog/tree/master/react-isomorphic-hot-example

react靜態資源的熱加載配置并不復雜。webpack-dev-server負責重新編譯代碼，react-hot-loader負責熱加載。

Note:webpack-dev-server也可以用開一個express服務器配合webpack-dev-middleware和webpack-hot-middleware中間件實現

配置webpack.client-dev.js:

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

// ...

entry: [
    "react-hot-loader/patch",
    "webpack-dev-server/client?http://127.0.0.1:8080",
    "webpack/hot/only-dev-server",
    "./src/client/home", // 入口路徑
]
    

修改babel配置文件

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

修改入口文件

import React from "react";
import ReactDOM from "react-dom";

// 共享的組件頁面
import Home from "../shared/page/Home";
// 熱加載組件
import ReactHotLoader from "../shared/component/ReactHotLoader";
const container = document.getElementById("react-container");

function renderApp(TheApp) {
    ReactDOM.render(
      
          
      ,
      container
    );
}

renderApp(Home);

// 下面的代碼用來支持我們熱加載應用
if (__DEV__ && module.hot) {
    // 接受這個文件的修改用來熱加載
    module.hot.accept("./home.js");
    // 應用任何的改變將造成熱加載，重新渲染。
    module.hot.accept(
      "../shared/page/Home",
      () => renderApp(require("../shared/page/Home").default)
    );
}

開發模式下，server端的配置比較復雜，需要考慮的事情如下：

監聽server代碼的變動。

需要重新編譯server代碼

重新開啟server服務器，并保證require最新的server代碼

保證server端口按需開關，不沖突

監聽server代碼

 // 監聽server文件的變化，如果被修改則調用compileHotServer
 const watcher = chokidar.watch([
     path.resolve(__dirname, "../src"),
     path.resolve(__dirname),
 ], {ignored: path.resolve(__dirname, "../src/client")});

 watcher.on("ready", () => {
     watcher
     .on("add", compileHotServer)
     .on("addDir", compileHotServer)
     .on("change", compileHotServer)
     .on("unlink", compileHotServer)
     .on("unlinkDir", compileHotServer);
 });

關閉所有與客戶端的連接，關閉server服務器，重新編譯server代碼

 // 關閉所有連接，關閉服務器，重新編譯
 function compileHotServer() {
     compiling ++;
     // listenerManager實例包含當前web服務器對象和客戶端連接的socket集合
     if (listenerManager) {
         listenerManager.dispose(true).then(runCompiler);
     } else {
         runCompiler();
     }
 }
 
 // webpack重新編譯
 function runCompiler() {
    compiler.run(() => undefined);
 }

重新開啟server服務器

// server代碼編譯完成
 // 開啟server服務器
 compiler.plugin("done", stats => {
     compiling --;
     if (compiling !== 0) return;

     if (stats.hasErrors()) {
         console.log(stats.toString());
         return;
     }

     console.log("? ?  Build server bundle done.");
     // 確保新的server bundles 代碼不在module cache當中
     Object.keys(require.cache).forEach((modulePath) => {
         if (modulePath.indexOf(compiler.options.output.path) !== -1) {
             delete require.cache[modulePath];
         }
     });

     try {
         const listener = require(compiledOutputPath).default;
         listenerManager = new ListenerManager(listener, "server");
     } catch (err) {
         console.log(err);
     }
 });
 

. react-router包含的頁面組件更新后，提示[react-router] You cannot change ; it will be ignored，但不影響刷新

通過以上配置，可以實現修改代碼后，實現server和client代碼的更新以及hot reload。
代碼開發過程中，需要開啟兩個端口，分別用來提供client端靜態資源的編譯和后臺的server。

如果在開發模式下，有更完善的react isomoriphic服務器渲染熱加載的解決方案，歡迎大家積極貢獻 ?