React Native热更新方案

简介: 一、目标 React Native热更新就是下载新RN包替换老RN包,那么我们需要考虑的点就是增量更新,要达到增量更新的目的,就需要把老RN包与新RN包的差异找出来,并且可以将这些差异与老RN包还原出新RN包。

一、目标

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文件夹存放图片资源。

如下图所示:

c0ddfa3c5095d4cd32663970902a4c4d3c01d39a


四、补丁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、打开终端安装


brew install bsdiff


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


bsdiff /Users/javalong/Desktop/test/hot_old.zip /Users/javalong/Desktop/test/hot_new.zip /Users/javalong/Desktop/test/hot.patched


3、使用bspatch生成新包文件


bspatch /Users/javalong/Desktop/test/hot_old.zip /Users/javalong/Desktop/test/hot_new_patch.zip /Users/javalong/Desktop/test/hot.patched

4、 验证生成的新包是否正确,两个md5相同,则生成是正确的
md5 /Users/javalong/Desktop/test/hot_new.zip

md5 /Users/javalong/Desktop/test/hot_new_patch.zip

七、iOS上的patch代码实现


#include "bspatch.h"
#include <sys/cdefs.h>

#include <bzlib.h>
#include <stdlib.h>
#include <stdio.h>
#include <string.h>
#include <err.h>
#include <unistd.h>
#include <fcntl.h>

typedef unsigned char u_char;

static off_t offtin(u_char *buf)
{
    off_t y;
    
    y=buf[7]&0x7F;
    y=y*256;y+=buf[6];
    y=y*256;y+=buf[5];
    y=y*256;y+=buf[4];
    y=y*256;y+=buf[3];
    y=y*256;y+=buf[2];
    y=y*256;y+=buf[1];
    y=y*256;y+=buf[0];
    
    if(buf[7]&0x80) y=-y;
    
    return y;
}

int beginPatch(const char* oldfile, const char* newfile, const char* patchfile)
{
    FILE * f, * cpf, * dpf, * epf;
    BZFILE * cpfbz2, * dpfbz2, * epfbz2;
    int cbz2err, dbz2err, ebz2err;
    int fd;
    ssize_t oldsize,newsize;
    ssize_t bzctrllen,bzdatalen;
    u_char header[32],buf[8];
    u_char *old, *new;
    off_t oldpos,newpos;
    off_t ctrl[3];
    off_t lenread;
    off_t i;
    
    //if(argc!=4) errx(1,"usage: %s oldfile newfile patchfile\n",argv[0]);
    
    /* Open patch file */
    if ((f = fopen(patchfile, "r")) == NULL) {
        //        err(1, "fopen(%s)", patchfile);
        return -1;
    }
    
    /*
     File format:
     0	8	"BSDIFF40"
     8	8	X
     16	8	Y
     24	8	sizeof(newfile)
     32	X	bzip2(control block)
     32+X	Y	bzip2(diff block)
     32+X+Y	???	bzip2(extra block)
     with control block a set of triples (x,y,z) meaning "add x bytes
     from oldfile to x bytes from the diff block; copy y bytes from the
     extra block; seek forwards in oldfile by z bytes".
     */
    
    /* Read header */
    if (fread(header, 1, 32, f) < 32) {
        if (feof(f))
            errx(1, "Corrupt patch\n");
        return -1;
    }
    
    /* Check for appropriate magic */
    if (memcmp(header, "BSDIFF40", 8) != 0)
        errx(1, "Corrupt patch\n");
    
    /* Read lengths from header */
    bzctrllen=offtin(header+8);
    bzdatalen=offtin(header+16);
    newsize=offtin(header+24);
    if((bzctrllen<0) || (bzdatalen<0) || (newsize<0))
        errx(1,"Corrupt patch\n");
    
    /* Close patch file and re-open it via libbzip2 at the right places */
    if (fclose(f))
        return -1;
    if ((cpf = fopen(patchfile, "r")) == NULL)
        return -1;
    if (fseeko(cpf, 32, SEEK_SET))
        return -1;
    if ((cpfbz2 = BZ2_bzReadOpen(&cbz2err, cpf, 0, 0, NULL, 0)) == NULL)
        return -1;
    if ((dpf = fopen(patchfile, "r")) == NULL)
        return -1;
    if (fseeko(dpf, 32 + bzctrllen, SEEK_SET))
        return -1;
    if ((dpfbz2 = BZ2_bzReadOpen(&dbz2err, dpf, 0, 0, NULL, 0)) == NULL)
        return -1;
    if ((epf = fopen(patchfile, "r")) == NULL)
        return -1;
    if (fseeko(epf, 32 + bzctrllen + bzdatalen, SEEK_SET))
        return -1;
    if ((epfbz2 = BZ2_bzReadOpen(&ebz2err, epf, 0, 0, NULL, 0)) == NULL)
        return -1;
    
    if(((fd=open(oldfile,O_RDONLY,0))<0) ||
       ((oldsize=lseek(fd,0,SEEK_END))==-1) ||
       ((old=malloc(oldsize+1))==NULL) ||
       (lseek(fd,0,SEEK_SET)!=0) ||
       (read(fd,old,oldsize)!=oldsize) ||
       (close(fd)==-1)) err(1,"%s",oldfile);
    if((new=malloc(newsize+1))==NULL) err(1,NULL);
    
    oldpos=0;newpos=0;
    while(newpos<newsize) {
        /* Read control data */
        for(i=0;i<=2;i++) {
            lenread = BZ2_bzRead(&cbz2err, cpfbz2, buf, 8);
            if ((lenread < 8) || ((cbz2err != BZ_OK) &&
                                  (cbz2err != BZ_STREAM_END)))
                errx(1, "Corrupt patch\n");
            ctrl[i]=offtin(buf);
        };
        
        /* Sanity-check */
        if(newpos+ctrl[0]>newsize)
            errx(1,"Corrupt patch\n");
        
        /* Read diff string */
        lenread = BZ2_bzRead(&dbz2err, dpfbz2, new + newpos, ctrl[0]);
        if ((lenread < ctrl[0]) ||
            ((dbz2err != BZ_OK) && (dbz2err != BZ_STREAM_END)))
            errx(1, "Corrupt patch\n");
        
        /* Add old data to diff string */
        for(i=0;i<ctrl[0];i++)
            if((oldpos+i>=0) && (oldpos+i<oldsize))
                new[newpos+i]+=old[oldpos+i];
        
        /* Adjust pointers */
        newpos+=ctrl[0];
        oldpos+=ctrl[0];
        
        /* Sanity-check */
        if(newpos+ctrl[1]>newsize)
            errx(1,"Corrupt patch\n");
        
        /* Read extra string */
        lenread = BZ2_bzRead(&ebz2err, epfbz2, new + newpos, ctrl[1]);
        if ((lenread < ctrl[1]) ||
            ((ebz2err != BZ_OK) && (ebz2err != BZ_STREAM_END)))
            errx(1, "Corrupt patch\n");
        
        /* Adjust pointers */
        newpos+=ctrl[1];
        oldpos+=ctrl[2];
    };
    
    /* Clean up the bzip2 reads */
    BZ2_bzReadClose(&cbz2err, cpfbz2);
    BZ2_bzReadClose(&dbz2err, dpfbz2);
    BZ2_bzReadClose(&ebz2err, epfbz2);
    if (fclose(cpf) || fclose(dpf) || fclose(epf)) {
        err(1, "fclose(%s)", patchfile);
        return -1;
    }
    
    /* Write the new file */
    if(((fd=open(newfile,O_CREAT|O_TRUNC|O_WRONLY,0666))<0) ||
       (write(fd,new,newsize)!=newsize) || (close(fd)==-1)) {
        err(1,"%s",newfile);
        return -1;
    }
    
    free(new);
    free(old);
    
    return 0;
}







目录
相关文章
|
25天前
|
移动开发 前端开发 JavaScript
React DnD:实现拖拽功能的终极方案?
本文首发于微信公众号“前端徐徐”,介绍了一个强大的 React 拖拽库——React DnD。React DnD 帮助开发者轻松创建复杂的拖拽界面,适用于 Trello 风格的应用、列表重排序、可拖拽的 UI 组件等场景。文章详细介绍了 React DnD 的基本信息、主要特点、使用场景及快速上手指南。
64 3
React DnD:实现拖拽功能的终极方案?
|
2月前
|
资源调度 Kubernetes 前端开发
react-intl——react国际化使用方案
react-intl——react国际化使用方案
|
1月前
|
缓存 前端开发 JavaScript
10 种方案提升你 React 应用的性能
本文首发于微信公众号「前端徐徐」,作者徐徐分享了提升 React 应用性能的方法。文章详细介绍了 `useMemo`、虚拟化长列表、`React.PureComponent`、缓存函数、使用 Reselect、Web Worker、懒加载、`React.memo`、`useCallback` 和 `shouldComponentUpdate` 等技术,通过实际案例和代码示例展示了如何优化 React 应用的性能。这些方法不仅减少了不必要的重新渲染和计算,还提升了应用的响应速度和用户体验。
20 0
|
2月前
|
开发框架 Dart 前端开发
Android 跨平台方案对比之Flutter 和 React Native
本文对比了 Flutter 和 React Native 这两个跨平台移动应用开发框架。Flutter 使用 Dart 语言,提供接近原生的性能和丰富的组件库;React Native 则基于 JavaScript,具备庞大的社区支持和灵活性。两者各有优势,选择时需考虑团队技能和项目需求。
342 8
|
6月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
239 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
3月前
|
缓存 监控 前端开发
React 代码优化方案
【8月更文挑战第19天】React 代码优化方案
56 0
|
4月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
6月前
|
监控 前端开发 搜索推荐
react 表单受控的现代实现方案
`react-form-simple`是一个轻量级的React表单库,专注于简化受控表单的开发,提供数据绑定、验证、错误处理和UI更新等功能。它通过简洁的API减少复杂性,支持第三方UI库集成,并具备高度可扩展性。核心特点包括基于Proxy的数据绑定、实时错误处理、高效的UI更新和灵活的使用方式。通过`useForm`和`render`等钩子,开发者可以快速构建表单应用,同时支持动态表单和自定义验证规则。该库旨在提高开发效率,适用于复杂表单场景,降低学习和维护成本。
217 2
react 表单受控的现代实现方案
|
4月前
|
缓存 监控 前端开发
react 性能优化方案?
【7月更文挑战第15天】改善React应用性能的关键策略包括:使用生产环境构建减少体积,避免不必要的渲染(如用React.memo或PureComponent),正确设置列表渲染的key,简化组件层级,实施懒加载,避免render中的复杂计算,选择优化过的库,控制重渲染范围,监控性能并合并state更新。这些优化能提升响应速度和用户体验。
51 0
|
5月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
130 1