【中文】React组件热加载原理及实现

Hot Reloading in React

本文是Dan Abramov发表于Medium文章的部分译文，只截取了其中部分内容，仅供学习交流，主要作为本人其他博客的素材使用，禁止转载

React Hto Loader是我第一个比较知名的开源项目，据我所知，这是第一个可以实现让使用者无需重新挂载组件组件或是丢失组件state的工具，在刚开始的时候我只是做出了一个Demo用于在台上进行演示，不过在之后我发现了大家对这个工具的巨大热情，所以我花费了几周的时间开发出了这个工具。

预览图片

第一次尝试: 直接使用HMR

在创建这个特别的项目之前，我曾想到直接使用webpack提供的HMR来替换项目中的根节点并且重新渲染我们的整个React树。

但是需要注意的是HMR根本不是为React定制的。James Long在这片文章中说的很不错。简单来说他只是一个「当新版本的模块可以使用过后，调用设置好的回调函数，让我们便于对新模块做一些处理」的作用。这件事情会发生在你每次保存修改好的文件的时候。

一个纯粹的HMR来实现热加载就像是这样的：

var App = require('./App')
var React = require('react')
var ReactDOM = require('react-dom')

// Render the root component normally
var rootEl = document.getElementById('root')
ReactDOM.render(, rootEl)

// Are we in development mode?
if (module.hot) {
  // Whenever a new version of App.js is available
  module.hot.accept('./App', function () {
    // Require the new version and render it instead
    var NextApp = require('./App')
    ReactDOM.render(, rootEl)
  })
}

只要你按照类似上面的配置处理好了你的react引用，那么只要出现了文件的修改，你的应用状态就可以直接刷新而不用刷新浏览器界面啦。

这样的实现是最纯粹的，没有用到React-Hot-Loader，React-Transform，没有对你的模块做任何有关语义化的改变，只是做到了监听变化，适时地插入新的