React Native热更新方案

一、目标

react native热更新就是下载新rn包替换老rn包，那么我们需要考虑的点就是增量更新，要达到增量更新的目的，就需要把老rn包与新rn包的差异找出来，并且可以将这些差异与老rn包还原出新rn包。bsdiff和bspatch相关技术能实现我们的目标。

二、基本流程

1、服务器

使用bsdiff算法将老rn包和新rn包生成一个补丁patch文件，供客户端下载。

2、客户端

下载patch文件，使用bspatch算法将补丁patch文件和老rn包生成一个新rn包。

3、目前情况

暂时由客户端开发人员生成补丁patch文件，并将补丁patch文件上传给服务器。后期可以考虑在服务器端上实现一个补丁patch文件自动化生成工具。

三、rn包

1、rn包就是一个zip文件包。

2、zip文件包命名规则：hot_版本号.zip。

如：hot_1.0.zip、hot_1.1.zip、hot_2.0.zip

3、zip文件包目录结构为：根目录存放*.jsbundle文件和assets文件夹，assets包含images文件夹，images文件夹存放图片资源。

如下图所示：

四、补丁patch文件

1、命名规则：hot_老版本号_新版本号.patched。

如：

第一个包，版本号为1，不需要补丁patch文件；

第二个包，版本号为2，则与第一个包生成一个补丁文件，命名为hot_1_2.patched;

第三个包，版本号为3，则与第一个包生成一个补丁文件，命名为hot_1_3.patched;

  则与第二个包生成一个补丁文件，命名为hot_2_3.patched;

第四个包，版本号为4，则与第一个包生成一个补丁文件，命名为hot_1_4.patched;

  则与第二个包生成一个补丁文件，命名为hot_2_4.patched;

  则与第三个包生成一个补丁文件，命名为hot_3_4.patched;

2、服务器接口根据版本号，返回最新的补丁patch文件。

如：服务器存在

hot_1_2.patched、

hot_1_3.patched、hot_2_3.patched，

hot_1_4.patched，hot_2_4.patched，hot_3_4.patched这些补丁文件。

则请求处理如下：

当收到版本号为1的请求时，服务器返回hot_1_4.patched；

当收到版本号为2的请求时，服务器返回hot_2_4.patched；

当收到版本号为3的请求时，服务器返回hot_3_4.patched；

3、更为复杂的情况，由于我们是混合开发，当牵扯到rn与native之间的交互发生变更时，就不能让热更新发挥作用了，否则会导致崩溃，这需要服务器添加一些逻辑控制了。

五、实践

一个293kb的老rn包，升级到570kb的新rn包，只需要595字节的补丁包。

我们可以看到下载补丁patch文件，实现增量更新，节省网络带宽和服务器资源。

六、mac上使用bsdiff和bspatch

1、打开终端安装

2、使用bsdiff生成*.patched补丁文件

3、使用bspatch生成新包文件

4、验证生成的新包是否正确，两个md5相同，则生成是正确的

七、ios上的patch代码实现