ReactNative底层架构简述

RN现在主要有3个线程：

JS thread。JS代码执行线程，负责逻辑层面的处理。Metro（打包工具）将React源码打包成一个单一JS文件(就是图中JSBundle)。然后传给JS引擎执行，现在ios和android统一用的是JSC。

UI Thread(Main Thread/Native thread)。这个线程主要负责原生渲染（Native UI）和调用原生能力(Native Modules)比如蓝牙等。

Shadow Thread。这个线程主要是创建Shadow Tree来模拟React结构树。Shadow Tree可以类似虚拟dom。RN使用Flexbox布局，但是原生是不支持，所以Yoga就是用来将Flexbox布局转换为原生平台的布局方式。

640.png

Bridge的问题
问题：因此强交互异步Bridge容易成为瓶颈。
解决：合并多个通信次数，减少Bridge。JSI新架构。原生组件。

JSI新架构

JSI是Javascript Interface的缩写，一个用C++写成的轻量级框架，它作用就是通过JSI，JS对象可以直接获得C++对象(Host Objects)引用，并调用对应方法。

有了JSI，JS和Native就可以直接通信了,调用过程如下：
JS->JSI->C++->ObjectC/Java

640.png

Fabric

Fabric是整个架构中的新UI层，包括了新架构图中的renderer和shadow thread。

自此三个线程通信再也不需要通过Bridge，可以直接知道对方的存在，让同步通信成为现实。另外一个好处就是有了JSI，JS引擎不再局限于JSC，可以自由的替换为V8,Hermes，进一步提高JS解析执行的速度。有了JSI以后，JS可以直接掉调用其他线程，实现同步通信机制。另外数据可以直接引用，不需要拷贝，于是就变成了下面新的通信模式.