React Native 新架构，金九银十前端热点知识

本文转载自知乎专栏前端酱爆，作者章伟东，网易云音乐 前端工程师。

本文主要介绍FB团队正在重构的ReactNative(下面称RN)新架构，主要当前架构，Bridge带来的问题，新架构，JSI，Fabric，TurboModules，CodenGen及LeanCore等概念。

当前架构

---

RN现在主要有3个线程

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

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

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

Bridge的问题

首先回顾一下当前Bridge的运行过程。

当我们写了类似下面的React源码。

<View style={ {

backgroundColor: ‘pink’,

width: 200,

height: 200}}

/>

JS thread会先对其序列化,形成下面一条消息

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