原文链接前言hotreload分析react静态资源热加载分析reactserver配置分析待解决-Loader在前端开发中可以轻松实现局部刷新。但是配合nodeserver的react-isomorphic实现局部刷新，同时更新client和server代码，并不容易。一个可行的实现介绍如下：适用于koa2，react-hot-loader3，react-router可选。Demo代码地址：https://github.com/lanjingling0510/blog/tree/master/react-isomorphic-hot-example热加载分析react静态资源热加载分析react静态资源热加载配置并不复杂。webpack-dev-server负责重新编译代码，react-hot-loader负责热加载。注意：webpack-dev-server也可以用来开一个expressserver配合webpack-dev-middleware和webpack-hot-middleware中间件实现配置webpack.client-dev.js:plugins:[newwebpack.HotModuleReplacementPlugin()]//...条目:['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"]修改入口文件importReactfrom'react';importReactDOMfrom'react-dom';//共享组件页面importHomefrom'../shared/page/Home';//热加载组件importReactHotLoaderfrom'../shared/component/ReactHotLoader';constcontainer=document.getElementById('react-container');functionrenderApp(TheApp){ReactDOM.render(,container);}renderApp(Home);//下面代码用于支持我们的热加载应用程序//应用任何更改都会导致热重新加载、重新渲染。module.hot.accept('../shared/page/Home',()=>renderApp(require('../shared/page/Home').default));}Reactserver配置解析开发模式，服务器端的配置比较复杂，需要考虑的事情如下：监控服务器代码的变化。需要重新编译服务端代码，重启服务端server，保证需要最新的服务端代码，保证服务端端口按需开关，不冲突。监控服务器代码//监控服务器文件变化，调用compileHotServerconstwatcher=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);});关闭与客户端的所有连接，关闭服务器，重新编译服务器代码//关闭所有连接，关闭服务器，重新编译functioncompileHotServer(){compiling++;//listenerManager实例包含服务器对象和客户端连接的当前WebSocket集合if(listenerManager){listenerManager.dispose(true).then(runCompiler);}else{运行编译器();}}//webpack重新编译函数runCompiler(){compiler.run(()=>undefined);}重启服务器server//服务器代码编译完成//启动服务器servercompiler.plugin('done',stats=>{comp凌--;如果（编译！==0）返回；如果(stats.hasErrors()){console.log(stats.toString());返回;}console.log('??Buildserverbundledone.');//确保新的服务器包代码不在模块缓存中Object.keys(require.cache).forEach((modulePath)=>{if(modulePath.indexOf(compiler.options.output.path)!==-1){deleterequire.cache[modulePath];}});尝试{constlistener=require(compiledOutputPath).default;listenerManager=newListenerManager(listener,'server');}catch(err){console.log(err);}});有待解决。react-router包含的页面组件更新后，[react-router]不能改变；会被忽略，但是不会影响刷新总结通过上面的配置，可以修改代码最后在更新服务端和客户端代码以及热重载代码开发的过程中，需要打开两个端口，分别用到分别提供客户端静态资源编译和后台服务器。如果有更完整的react同构服务端渲染在开发模式下热加载的解决方案，欢迎大家积极投稿？
