正文从这开始～

　　最近发现 React Native 官方博客上面这篇介绍 Hot Reload 原理的文章，仔细阅读了一下，顺便翻译为中文，以飨读者。本文不少内容加入了译者的理解，并没有严格字对字翻译，英文水平不错的同学可以直接阅读原文[1]

　　React Native 的设计目标是为开发者提供最好的开发体验，其中很重要的一点就是尽量缩短文件修改后到看到修改所产生的变化之间所需的时间。我们的目标是将这个循环所需的时间降到 1 秒以下，即使你应用的功能和体积在不断的膨胀。

　　通过下面三个主要特性我们离目标越来越近：

基于 Java 进行开发，避免了长时间的代码编译过程

实现了一个名为 Packager 的工具，用来将 es6/flow/jsx 文件转换成虚拟机可以理解的普通 Java 语言。Packager 被设计为一个服务器，从而能够在内存中保存当下的状态，实现快速的增量更新，同时可以使用系统的多核 CPU 提高性能。

新增了一个名为实时加载（Live Reload）的特性，实现保存代码修改后自动重新加载 APP

　　到这一步，对开发者而言瓶颈已然不是重新加载 APP 所需花费的时间，而是如何保持 APP 的状态。一个典型的场景是如果当前页面是一个三级页面，那么每次重新加载后，我们都要通过重复之前的多次点击才能再次进入这个三级页面，而这将花费好几秒的时间。

　　热加载

　　热加载的思想是运行时动态注入修改后的文件内容，同时不中断 APP 的正常运行。这样，我们就不会丢失 APP 的任何状态信息，尤其是 UI 页面栈相关的。

　　关于实时加载（Live Reload）和热加载（Hot Reload）的区别，可以参见YouTube上面这个视频[2]，其中关键的区别在于实时加载应用更新时需要刷新当前页面，可以看到明显的全局刷新效果，而热加载基本上看不出刷新的效果，类似于局部刷新。

　　热加载在 React Native 0.22 中开始引入，摇动手机打开 RN 的开发者菜单，点击 Enable Hot Reloading 即可开启。

　　核心实现原理

　　热加载的基础是模块热替换（HMR，Hot Module Replacement[3]），HMR 最开始是由 Webpack 引入的，我们在 React Native Packager 中也实现了这个功能。HMR 使得 Packager 可以监控文件的改动并发送 HMR 更新消息（HMR update）给包含在 APP 中的一层很薄的 HMR 运行时（HMR runtime）。

　　简而言之，HMR 更新消息包含 JS 模块中发生变化的代码，当 HMR 运行时接收到这个消息，就使用新的代码替换旧的代码，流程如下图所示：

　　HMR 更新消息中除了包含发生改动的代码之外，还需要包含其他一些信息，因为如果只有发生改动的代码，HMR 运行时不足以实现代码替换。原因在于模块系统可能已经缓存了我们想要替换的模块的 exports，直播，比如你的应用有如下两个模块，其中 log 模块的功能是打印 time 模块提供的日期信息，代码如下所示：

　　当应用打包（bundled）后，React Native 会使用 __d 函数将所有的模块注册到模块系统中。在我们这个例子 APP 中，可以看到下面所示 log 模块的 __d定义：

　　这个函数调用将每个模块的代码包裹进一个匿名函数中，我们通常称之为工厂函数。模块系统运行时会跟踪每个模块的工厂函数，看它是否已经被执行，以及执行的结果（exports）。当一个模块被 required 之后，模块系统会判断当前模块的工厂函数是否已经执行过，如果是则返回缓存的 exports，否则调用工厂函数并保存结果到缓存中。

　　因此，当你启动应用并 require log 模块时，这时由于 log 和 time 这两个模块的工厂函数都还没有执行过，因此不存在 exports 缓存。接着用户修改time 模块添加返回 MM/DD 形式的日期，代码如下：

　　步骤一：Packager 会将 time 模块的新代码发送给 HMR 运行时

　　步骤二：当 log 模块最终被 required 且 exported 函数被执行到时，它会随着 time 模块的变化而变化

　　整个过程如下图所示：

　　让我们假设 log 模块以最顶层的方式 require time 模块：

　　步骤一：当 log 被 required 时，HMR 运行时会缓存它和 time 的 exports