ReactNative基础知识

ReactNative基础知识相关整理

一，架构

https://reactnative.cn/architecture/overview

1，核心工作原理：

利用Fabric（发↑布瑞克~）渲染器，通过调用c++接口让react和各个平台直接通信，将react视图渲染为宿主平台（Host platform）视图并管理。

• Fabric 渲染器存在于 JavaScript 中，是用c++实现的，与其他平台间共享c++内核。
• 新渲染器不同于旧渲染器的异步布局，是同步的。
• React 使用序列化 JSON 在 JavaScript 和宿主平台之间传递数据。新的渲染器用 JSI（JavaScript Interface）直接获取 JavaScript 数据

在0.76版本中，新架构在所有React Native项目中默认启用。低于该版本的可通过以下方式启用：

Android：在 android/gradle.properties 路径下修改：

# Use this property to enable support to the new architecture.
# This will allow you to use TurboModules and the Fabric render in
# your application. You should enable this flag either if you want
# to write custom TurboModules/Fabric components OR use libraries that
# are providing them.
-newArchEnabled=false
+newArchEnabled=true

iOS：在 CocoaPods 的依赖里添加指令：

RCT_NEW_ARCH_ENABLED=1 bundle exec pod install

2，渲染流水线：

https://reactnative.cn/architecture/render-pipeline

React Native 渲染器通过一系列加工处理，将 React 代码渲染到宿主平台。这一系列加工处理就是渲染流水线（pipeline），它的作用是初始化渲染和 UI 状态更新。

 1. 渲染（Render）：

• 在 JavaScript 中，React 执行那些产品逻辑代码创建 React 元素树（React Element Trees）
• 在 C++ 中，用 React 元素树创建