React Native新架构

这篇主要探讨React Native旧架构的问题，以及新架构中的TurboModule以及JSI

当前架构

React Native的旧架构主要有3个线程

• JS Thread: JS代码执行线程，负责逻辑层面的处理。Metro（打包工具）将React源码打包成一个单一JS文件（及JSBundle）。然后传给JS引擎执行，现在ios和android统一用的是JSC。
• UI Thread：Main Thread/Native Thread, 负责原生渲染（Native UI）和调用原生能力（Native Module）
• Shadow Thread：这个线程主要是创建Shadow Tree来模拟React结构树。Shadow Tree可以类似虚拟Dom。RN采用的是Flex box布局，但是原生是不支持的，所以需要Yoga来将Flex box布局转换为原生瓶体啊的布局方式。

Bridge的问题

首先我们需要了解一下Bridge的运行过程

当我门写了类似下面的React Native源码

<View
	style={{
		backgroundColor: 'pink',
		width: 200,
		height: 200,
	}}
/>

JS Thread会先对其序列化，形成下面这样的消息

UIManager.createView([343, “RCTView”, 31, {“backgroundColor”: -16181, “width”: 200, "height”: 200}])

通过Bridge发到Shadow Thread。Shadow Thread接收到这条消息后，先反序列化，形成Shadow Tree，然后传给Yoga，形成原生布局信息。

接着又通过Bridge传给UI Thread。

UI Thread拿到消息后，同样先反序列化，然后根据所给的布局信息，进行绘制。

从上面的过程可以看到三个线程的交互都需要通过Bridge，因此瓶颈也就在此

Bridge有三个特点：

• 异步：这些消息队列是异步的，无法保证处理事件的顺序
• 序列化：通过JSON格式来传递消息，每次都要经历序列化和反序列化，开销很大
• 批处理：对Native调用进行排队，批量处理

异步设计的好处就是不阻塞，这种设计在大多数情况下能满足新能要求，但是在某些情况下机会出现问题