前段时间,在公司做了一次
“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
是如何创建的呢?
-
- RCTRootView 在 RN 启动完成后,会进入渲染流程。先创建一个
RCTRootContentView
对象,运行 app 中的 JS 代码,并将创建的 RCTRootContentView 对象作为入口视图容器。代码主流程如下:
- RCTRootView 在 RN 启动完成后,会进入渲染流程。先创建一个
- (void)bundleFinishedLoading:(RCTBridge *)bridge
{
...
// 创建一个 RCTRootContentView 对象
_contentView = [[RCTRootContentView alloc] initWithFrame: bridge: reactTag: sizeFlexiblity:];
// 运行app的JS代码逻辑
[self runApplication:bridge];
...
// 将RCTRootContentView 对象作为入口视图容器
[self insertSubview:_contentView atIndex:0];
...
}
-
- 在创建 RCTRootContentView 的实例方法中,会触发 UIManager 的实例化和实例方法
registerRootView
。UIManager 中会通过宏RCT_EXPORT_METHOD()
导出一系列方法给 JS 端调用,用于 JS 端对 OC 端的 View 组件的进行操作,如创建和移除 view,调整 view 的关系,设置 view 的属性等。
- 在创建 RCTRootContentView 的实例方法中,会触发 UIManager 的实例化和实例方法
- (instancetype)initWithFrame: bridge: reactTag: sizeFlexiblity:
{
if ((self = [super initWithFrame:frame])) {
...
// UIManager 的实例化
[_bridge.uiManager registerRootView:self];
...
}
return self;
}
UIManager创建完成后,在 Native 层
创建视图
和刷新视图
的时候,到底有啥用呢?接着往下看
如何创建视图?
JS 端编写的 React 代码是怎么渲染成原生组件的呢?
- 调用方法
createView:
创建容器视图 - 紧接着调用
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:
方法来渲染子视图,该方法主要做三件事,代码实现如下:
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 添加到视图层级树的操作。代码实现如下:
如何刷新视图?
刷新视图,主要分两种情况:
- 当更新节点属性等时,通过
updateView:
刷新视图 - 当出现插入、删除、排序节点时,通过
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原理解析的同系列文章:
结语
欢迎大家关注我的公众号,一起学习交流大前端技术和投资理财心得。