React Native架构概述

React Native

Fabric

Fabric是React Native的新的渲染系统，是对传统渲染系统的概念演变。核心原理是把更多的渲染逻辑统一到C++，提高与主机平台的互操作性，给React Native解锁了新的可能性。
1：通过改进主机平台与React View的交互性，渲染器能够同步measure和render React界面。在老的架构中，React Native layout是异步的，这导致了当在一个host view嵌入React Native渲染器时出现“jump”的现象。新的Fabrice解决了这个问题。
2：通过支持多优先级和同步事件，渲染器可以对某些用户交互进行优先级排序，以确保及时处理这些交互。
3：与React Suspense集成，允许在React应用程序中更直观地设计数据获取。
4：在React Native上启用React并发功能。
5：更容易为React Native实现服务器端渲染。

新体系结构还提供了代码质量、性能和可扩展性方面的优势：
1：Type safety
生成代码以确保跨JS和主机平台的类型安全。代码生成使用JavaScript组件声明作为真实源，以生成C++结构来支持道具。JavaScript和主机组件道具之间的不匹配会触发生成错误。
2：Shared C++ core
渲染器在C++中实现，核心是在平台之间共享的。这提高了一致性，并使在新平台上采用React Native变得更容易。
3：Better Host Platform Interoperability
当把主机平台嵌入到React Native中时，同步和线程安全布局计算可以改善用户体验，而且使主机平台框架更容易集成。
4：Improved Performance
5：Consistency
新的渲染系统是跨平台的，更容易在不同平台之间保持一致性。
6：Faster Startup
默认情况下，主机组件是延迟初始化的。
7：Less serialization of data between JS and host platform
新的渲染器通过直接使用JavaScript接口（JSI）访问JavaScript值来改进数据传输。

React Native经由一系列的工作把React逻辑渲染到主机平台。这一系列的工作被称作render pipeline。用于初始化渲染和UI状态更新。render pipeline可以被分成三个阶段：

1：Render

React通过在JavaScript中创建一个React Element Tree来执行产品逻辑。通过这个React Element Tree，渲染器在C++中创建React Shadow Tree。

2：Commit

在React Shadow Tree完全创建后，渲染器触发了一次提交。这将会推动React Element Tree和React Shadow Tree作为”next tree“被加载，同时也会安排计算它们的布局信息。

3：mount

包含布局计算结果的Reac Shadow Tree将转换为Host View Tree。Next Tree ==> Rendered Tree

Fabric

Cross Platform Implementation跨平台实现

在以前的React Native渲染系统中，React Shadow Tree、布局逻辑和视图展平算法在每个平台上实现一次。当前的渲染器被设计成通过共享核心C++实现的跨平台解决方案。使用C++为核心渲染系统有几个优点：
1：C++单个实现可以降低开发和维护成本
2：C++融合Yoga到渲染器的开销更小，提高了性能，React Shadow Tree和布局计算
3：C++的内存占用也比Kotlin或者Swift小

动画系统在未来也将整合到渲染系统中，并将React Native渲染系统扩展到Windows等新平台，以及游戏控制台、电视等操作系统。

The renderer provides two sides of its C++ APIs:
(i) to communicate with React
(ii) to communicate with the host platfor

Cross Platform Implementation

View Flattening视图展平算法

Threading Model线程模型

The renderer uses three different threads:
UI thread (often called main): The only thread that can manipulate host views.
JavaScript thread: This is where React’s render phase is executed.
Background thread: Thread dedicated to layout.

ThreadingModel

nomarl

hignPriority

interruption

discreteEventInterruption

BatchUpdates

C++StateUpdate

mounting阶段永远在UI线程中执行： If the commit phase executes on background thread, the mounting phase is scheduled for the next “tick” of UI thread. On the other hand, if the commit phase executes on UI thread, mounting phase executes synchronously on the same thread.