React-native 跨平台原理

你说的曾经没有我的故事 提交于 2020-01-28 12:25:52

1、为什么React native 可以跨平台

其实通过react native的架构图就明白了,下面我们就根据架构图来理解一下为什么react native可以实现跨平台:
在这里插入图片描述
(1)、React:不同平台上编写基于React的代码,“Learn once, write anywhere”。

(2)、Virtual DOM:相对Browser环境下的DOM而言,Virtual DOM是DOM在内存中的一种轻量级表达方式(原话是lightweight representation of the document),可以通过不同的渲染引擎生成不同平台下的UI,JS和Native之间通过Bridge通信。

(3)、Web/iOS/Android:上层与用户交互的UI界面。

React-Native在JavaScript中抽象操作系统原生的UI组件,代替DOM元素来渲染,使用的是Android或iOS的本地控件,所以在UI渲染上已经非常接近Native App了。尽管业务逻辑代码使用JavaScript,但由于JavaScript是即时编译的,也就是第一次使用时会将JavaScript代码编译成二进制文件,所以JavaScript得运行效率比较高。因此,React Native的运行效率要比基于HTML5、CSS等技术的PhoneGap、AppCan高很多,因为这些技术直接使用HTML5进行渲染,而HTML5会大量使用DOM技术,DOM的操作是很消耗性能的。

总结:
主要是通过Virtual DOM来实现跨平台的,只要有Virtual DOM就可以通过不同的渲染引擎来实现view的跨平台。React native就是通过和native之间不断通信来实现UI的绘制等一系列操作,接下来我们就来了解一下js和native是如何通信的。

2、react native和 native之间的通信机制

(1)、通信机制图
Java端会把所有要暴漏的Java类的信息封装成Config传给JS,然后根据Config生成对应Java类的Javascript镜像对象,以及要暴漏的方法,在JS中调用这个镜像对象的方法就会被转发到对应的Java对象上,如下所示
在这里插入图片描述

(2)、js 和 native具体的通信过程
RN需要一个JS的运行环境, 在IOS上直接使用内置的javascriptcore, 在Android 则使用webkit.org官方开源的jsc.so。 此外还集成了其他开源组件,如fresco图片组件,okhttp网络组件等。

RN 会把应用的JS代码(包括依赖的framework)编译成一个js文件(一般命名为index.android.bundle) , RN的整体框架目标就是为了解释运行这个js 脚本文件,如果是js 扩展的API, 则直接通过bridge调用native方法; 如果是UI界面, 则映射到virtual DOM这个虚拟的JS数据结构中,通过bridge 传递到native , 然后根据数据属性设置各个对应的真实native的View。 bridge是一种JS 和 JAVA代码通信的机制, 用bridge函数传入对方module 和 method即可得到异步回调的结果

从 Android开发的角度来看, RN是一个普通的安卓程序加上一堆事件响应, 事件来源主要是JS的命令。主要有二个线程,UI main thread, JS thread。 UI thread创建一个APP的事件循环后,就挂在looper等待事件 , 事件驱动各自的对象执行命令。 JS thread 运行的脚本相当于底层数据采集器, 不断上传数据,转化成UI 事件, 通过bridge转发到UI thread, 从而改变真实的View。 后面再深一层发现, UI main thread 跟 JS thread更像是CS 模型,JS thread更像服务端, UI main thread是客户端, UI main thread 不断询问JS thread并且请求数据,如果数据有变,则更新UI界面。

4、附录

(1)、config(包含了要暴漏的所有java类的信息,json格式),在java端和js端有相同的一份格式如下:

{
    "remoteModuleConfig": {
        "MyToastAndroid": {
            "moduleID": 14,
            "methods": {
                "show": {
                    "methodID": 0,
                    "type": "remote"
                }
            },
            "constants": {
                "LONG": 1,
                "SHORT": 0
            }
        },...
    }
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!