追溯 React Hot Loader 的实现

如果你使用 React ，你可以在各个工程里面看到 Dan Abramov 的身影。他于 2015 年加入 facebook，是 React Hot Loader 、React Transform、redux-thunk、redux-devtools 等等的开发者。同样也是 React、Redux、Create-React-App 的联合开发者。从他的签名 Building tools for humans. 或许表明了他想打造高效的开发环境以及调试过程。

作为 Dan 的小迷妹，如他说 is curious where the magic comes from。这篇文章会带你们去了解 React Hot Loader 的由来，它实现的原理，以及在实现中遇到的问题对应的解决方法。也许你认为这篇文章太过于底层，对日常的业务并没有帮助，但希望你和我一样能通过了解一个实现得到乐趣，以及收获一些思路。

首先，React Hot Loader 的产生

Dan 在自己的文章里面说到。React Hot Loader 起源一个来自 stackoverflow 上的一个问题 —— what exactly is hot module replacement in webpack，这个问题解释了 webpack 的 hot module replacement（下面简称 HMR）到底是什么，以及我们可以利用它做什么，Dan 当时想到也 React 可以和 webpack hot module 以一种有趣的方式结合在一起。

于是他在 Twitter 上录制了一个简单的视频（请看下面），事实上视频中的实现依赖于它在 React 源代码里面插入了很多自己的全局变量。他本没指望到这个视频能带来多大的关注，但结果是他收到了很多点赞，并且粉丝狂增，他意识到必须以一个真正的工程去实现。

大图请戳

初步尝试, 直接使用 HMR

HMR 是属于 webpack 范畴内的实现，你可以在 webpack 的官方文档 看到如何开启它以及它提供的接口。如果你有印象，你会记得使用它需要
在 webpack config 或者 webpack-dev-server cli 里面指定开启 hot reloading 模式，并且在你的代码里写上 module.hot.accept(xxx)。但 HMR 到底是什么？我们可以用一句话总结：当一个 import 进来的模块发生了变化，HMR 提供了一个接口让我们使用 callback 回调去做一些事情。

一个使用 HMR 实现自动刷新的 React App 像下面这样：

// index.js var App = require('./App') var React = require('react') var ReactDOM = require('react-dom') // 像通常一样 render Root Element var rootEl = document.getElementById('root') ReactDOM.render(<App />, rootEl) // 我们是不是在 dev 环境 ？ if (module.hot) { // 当 App.js 更新了 module.hot.accept('./App', function () { // require 进来更新的 App.js 重新render var NextApp = require('./App') ReactDOM.render(<NextApp />, rootEl) }) }