「ReactNative原理」 Native层的渲染流程

崇尚价值投资的程序猿
7,243 阅读6分钟

前段时间，在公司做了一次“ReactNative原理解析”的技术分享，由于PPT不够详细，应一些小伙伴的需求，梳理出一份ReactNative原理解析的系列文章，希望能让大家对ReactNative的底层原理有一个系统全面的理解。

所谓 UI 渲染无非就是如何创建视图?，如何刷新视图?。在「ReactNative原理」 JS 层渲染之 diff 算法中，详细介绍了 ReactNative 在 js 层刷新的时候做了什么，我们知道，最后展示在界面上是通过 Native 层渲染的，那 Native 层是如何渲染的呢？

在 Native 层渲染中，核心是UIManager和ShadowView，创建视图和刷新视图基本都是围绕 UIManager 和 ShadowView进行的。

什么是 ShadowView？

看UIMananger的源码，我们会发现，UIMananger 暴露给 JS 端调用的对视图操作的 API 接口都会同时对 View 和 ShadowView 进行操作，那ShadowView到底是干什么的呢？

先来看下ShadowView 的官方解释：

翻译一下：

  • ShadowView 树就是 RCTView 视图树的镜像，两者是一一对应的关系，ShadowView 保存对应 View 的布局和子控件,管理 View 的加载

  • JSBridge 可以调用 ShadowView 中的 setters 方法设置样式等属性。

  • 每个 JSBridge 批处理结束，就会调用 collectUpdatedFrames:widthConstraint:heightConstraint来刷新整个视图布局。

简单来说，Native 层的 ShadowView 与 js 端的 VirtualDom作用类似（为提升程序性能而存在），ShadowView主要通过YGNode来计算视图布局，将计算后的结果，按批刷新视图View，防止对真正的视图 View 进行频繁操作，从而提升程序性能。所以，对 ShadowView 的操作一般在子线程，而对真正视图 View 的操作一定在主线程

看到这里，对ShadowView的理解应该还很抽象，接着往下看，看完如何创建视图,如何刷新视图，就会有一个比较深刻的理解了。

UIManager

看过源码，或写过自定义RN原生组件的话，都会发现提供给 RN 的 js 端使用的 UI 组件（如 RNImageView）在创建 View 的同时，都需要创建一个绑定的 ~UIManager（如RNImageView对应 RNImageViewManager）负责管理 native 端　和 js 端的通信。这里会详细介绍根视图 RCTRootView 对应的 UIManager。

UIManager 是如何创建的呢？

    1. RCTRootView 在 RN 启动完成后，会进入渲染流程。先创建一个 RCTRootContentView 对象，运行 app 中的 JS 代码，并将创建的 RCTRootContentView 对象作为入口视图容器。代码主流程如下：
- (void)bundleFinishedLoading:(RCTBridge *)bridge
{
 ...
  // 创建一个 RCTRootContentView 对象
  _contentView = [[RCTRootContentView alloc] initWithFrame: bridge: reactTag: sizeFlexiblity:];
  // 运行app的JS代码逻辑
  [self runApplication:bridge];
...
  // 将RCTRootContentView 对象作为入口视图容器
  [self insertSubview:_contentView atIndex:0];
...
}
    1. 在创建 RCTRootContentView 的实例方法中，会触发 UIManager 的实例化和实例方法registerRootView。UIManager 中会通过宏RCT_EXPORT_METHOD()导出一系列方法给 JS 端调用，用于 JS 端对 OC 端的 View 组件的进行操作，如创建和移除 view，调整 view 的关系，设置 view 的属性等。
- (instancetype)initWithFrame: bridge: reactTag: sizeFlexiblity:
{
  if ((self = [super initWithFrame:frame])) {
  ...
  // UIManager 的实例化
    [_bridge.uiManager registerRootView:self];
  ...
  }
  return self;
}

UIManager创建完成后，在 Native 层创建视图和刷新视图的时候，到底有啥用呢？接着往下看

如何创建视图？

JS 端编写的 React 代码是怎么渲染成原生组件的呢？

  1. 调用方法 createView:创建容器视图
  2. 紧接着调用setChildren将子组件添加到容器视图中，这个方法的核心是insertReactSubview:atIndex:

创建视图的整个流程图如下：

原生层渲染流程图

1. createView

启动完成，开始渲染时，通过 UIManager 的方法 createView:viewName:rootTag:props:来将 JS 编写的代码映射成 Native 端视图 View。在创建视图时，根据模块名 viewName 和 reactTag 创建 ShadowView，同时在主线程创建与 ShadowView 对应的 View，核心代码实现如下：

RCT_EXPORT_METHOD(createView:viewName:rootTag:props:)
{
  // 1.通过模块名viewName，获取模块配置信息componentData
  RCTComponentData *componentData = _componentDataByName[viewName];
 ...
  // 2.根据模块配置信息，创建 shadowView
  RCTShadowView *shadowView = [componentData createShadowViewWithTag:reactTag];
  // 设置属性并注册shadowView
  [componentData setProps:props forShadowView:shadowView];
  _shadowViewRegistry[reactTag] = shadowView;
  ...
  // 3.根据模块配置信息，创建 view
  RCTExecuteOnMainQueue(^{
   ...
    UIView *view = [componentData createViewWithTag:reactTag];
    // 设置属性并注册view
    [componentData setProps:props forView:view];
    uiManager->_viewRegistry[reactTag] = view;
   ...
  });
}

2. setChildren

在调用createView:viewName:rootTag:props:方法后，会紧接着触发setChildren:reactTags:方法来渲染子视图，该方法主要做三件事，代码实现如下：

setChildren源码

2.1 shadowView

RCTShadowView insertReactSubview:atIndex:方法，在 YGNode 树中插入相应的子节点，此时，并没有添加到视图层级树中！代码实现如下：

2.2 pendingUIBlocks

所有 JS to Native 的 UI 操作都不会立即执行，而是调用addUIBlock:将 UI 变化添加队列_pendingUIBlocks，等待合适的时机再按批执行队列。代码实现如下：

2.3 View

UIView+Rect 的 insertReactSubview:atIndex:方法 按照层级顺序(index)将 subView 添加到 reactSubviews 中，此时，还是没有真正添加到视图层级树中！ 代码实现如下：

3. flushUIBlocks

JS 在完成一批操作后（通过定时器每隔 16ms 调用一次），会调用 RCTUIManager 的 flushUIBlocks 方法，在主线程执行 UI block。代码实现如下：

- (void)flushUIBlocks
{
  // First copy the previous blocks into a temporary variable, then reset the
  // pending blocks to a new array. This guards against mutation while
  // processing the pending blocks in another thread.
  NSArray<RCTViewManagerUIBlock> *previousPendingUIBlocks = _pendingUIBlocks;
  _pendingUIBlocks = [NSMutableArray new];

  if (previousPendingUIBlocks.count) {
    // Execute the previously queued UI blocks
    RCTExecuteOnMainQueue(^{
      for (RCTViewManagerUIBlock block in previousPendingUIBlocks) {
        block(self, self->_viewRegistry);
      }
      ...
    });
  }
}

4. didUpdateReactSubViews

执行 flushUIBlocks 方法后，最终会调用 UIView+Rect 的 didUpdateReactSubviews 方法,完成 View 添加到视图层级树的操作。代码实现如下：

如何刷新视图？

刷新视图，主要分两种情况：

  1. 当更新节点属性等时，通过updateView:刷新视图
  2. 当出现插入、删除、排序节点时，通过manageChildren:更新视图

更新视图，都需要先通过ShadowView计算布局，再按批次刷新真正的View

整个刷新视图的流程图如下：

原生端刷新视图的流程图

1. updateView

JS 端setState后，当属性等发生变化时，JS 端通过 diff 算法计算后，将变化后的属性通过 UIManager 的updateView方法更新界面，源码如下：

与createView和setChildren类似，主要做三件事

1. 更新ShadowView的props
2. 将 UI 变化添加队列 _pendingUIBlocks
3. 更新View的props

2. manageChildren

JS 端setState后，如果新旧 Virtual DOM 的节点发生增加，删除，排序等节点变化，则 JS 端通过 diff 算法计算后，是通过 UIManager 的manageChildren方法更新界面的，源码如下：

与createView、setChildren、updateView类似，主要做三件事

1. 更新ShadowView （调用 RCTShadowView `insertReactSubview:atIndex:`方法）
2. 将 UI 变化添加队列 _pendingUIBlocks
3. 更新View （调用 UIView+Rect 的 `insertReactSubview:atIndex:`方法）

觉得不错请给一个小小的 赞 鼓励一下~

关于ReactNative原理解析的同系列文章：

结语

如果你也是一个对投资理财感兴趣的程序员，欢迎关注我的公众号「谷底飞龙」，一起成为技术界的投资大佬吧。

avatar
文章
阅读
粉丝