一粟

React Native渲染原理浅析

April 12, 2020

众所周知，RN和H5的区别在于：RN是使用Native组件来渲染的，而H5是依赖WebView。那么RN是如何做到写js代码，渲染Native组件的呢，这篇文章我们深入源码，一探究竟。使用的RN版本是v0.62.0

JS侧的UI是使用React来实现的。熟悉React的同学，都知道React使用jsx来写布局，然后会转换成虚拟dom树，最后再渲染到浏览器的真实dom里，那React Native是怎么做的呢？

为了方便阅读，这里先把文中提到的一些函数列出来：

image-20200413173449675

一、启动

以默认的demo为例，我们的代码入口在App.js，并且导出了jsx渲染函数。

const App = () => {
  return (
    <View key={'view-parent'} style={styles.parent}>
      <Text key={'text-1'} style={styles.text1}>
        Hello World!
      </Text>
      <Text key={'text-2'} style={styles.text2}>
        zey RN Test
      </Text>
    </View>
  );
};

export default App;

在根目录的index.js里会把这个函数根据appName，注册进去。

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

看下注册函数：

registerComponent(
  appKey: string,
  componentProvider: ComponentProvider,
  section?: boolean,
): string {
  let scopedPerformanceLogger = createPerformanceLogger();
  //存在runnales里
  runnables[appKey] = {
    componentProvider,
    run: appParameters => {
      //运行run的时候，开始执行渲染。
      renderApplication(
        componentProviderInstrumentationHook(
          componentProvider,
          scopedPerformanceLogger,
          .....//省略
        ）
      );
    },
  };
 	.....//省略
  return appKey;
},

这里把渲染函数存在runnables对象里。那么，是什么时候开始执行这里注册的runnables呢？这里就和客户端的调用有关了。

在启动RN页面时，客户端内部会调用下面这行代码，调用runApplication，传入对应的appName和一些参数。

catalystInstance.getJSModule(AppRegistry.class).runApplication(jsAppModuleName, appParams);

然后在js里AppRegistry.js就会执行对应名称的注册函数：

runApplication(appKey: string, appParameters: any): void {
  .....//省略
  runnables[appKey].run(appParameters);
},

可以看到走到了renderApplication里执行渲染逻辑。

再跟进去会发现有两个选择，ReactFabric和ReactNative，Fabric就是RN的新架构，现在最新的代码还是用的ReactNative：

  GlobalPerformanceLogger.startTimespan('renderApplication_React_render');//渲染计时开始
  if (fabric) {
    require('../Renderer/shims/ReactFabric').render(renderable, rootTag);//令人期待的新框架Fabric
  } else {
    require('../Renderer/shims/ReactNative').render(renderable, rootTag);
  }
  GlobalPerformanceLogger.stopTimespan('renderApplication_React_render');//渲染计时结束

二、遍历虚拟dom

接下来的渲染逻辑就和React非常相关了。（其实就是React的代码

进入Render函数：

render: function(element, containerTag, callback) {
  var root = roots.get(containerTag);

  if (!root) {
    root = createContainer(containerTag, LegacyRoot, false, null);
    roots.set(containerTag, root);
  }

  updateContainer(element, root, null, callback); //进入这里继续执行渲染
  return getPublicRootInstance(root);
}

在updateConainer里会创建一个update，并且插入到队列里，然后执行队列，接下来就是对组件树的遍历了。

var update = createUpdate(expirationTime, suspenseConfig);

update.payload = {
  element: element
};

enqueueUpdate(current$$1, update);
scheduleWork(current$$1, expirationTime);

接下来就是不停地检查、插入队列、根据优先级处理（但这里是串行的，并没有异步），这里省略具体代码，依次的函数调用顺序如下：

updateContainer
scheduleUpdateOnFiber
flushSyncCallbackQueue
flushSyncCallbackQueueImpl
runWithPriority
performSyncWorkOnRoot
workLoopSync

在workLoopSync里，我们可以看到一个while循环，这里就开始遍历组件树了

function workLoopSync() {
  while (workInProgress !== null) {
    workInProgress = performUnitOfWork(workInProgress);
  }
}

react遍历树的时候有两个重要的函数performUnitOfWork和completeUnitOfWork。我理解performUnitOfWork就是深度遍历到底，然后执行completeUnitOfWork回退，同时创建对应的dom/Native组件。也就是先创建的子节点再创建父节点的。

看下performUnitOfWork的部分代码：

function performUnitOfWork(unitOfWork) {
	//开始处理，会返回子组件fiber实例，用于深度循环遍历，把任务加入队列
	next = beginWork$$1(current$$1, unitOfWork, renderExpirationTime);

  if (next === null) {
    // 不存在子级fiber，完成当前单元任务的处理。
    next = completeUnitOfWork(unitOfWork);
  }

  return next;
}

这样就完成了一个子集任务的内容。

在completeUnitOfWork里，主要就是找父组件回退、找兄弟组件继续遍历：

function completeUnitOfWork(unitOfWork: Fiber): Fiber | null {
  workInProgress = unitOfWork;
  do {
    //完成当前的工作
    next = completeWork(current, workInProgress, renderExpirationTime);
		//兄弟组件
    const siblingFiber = workInProgress.sibling;
    if (siblingFiber !== null) {
      //返回兄弟组件继续遍历
      return siblingFiber;
    }
    //否则回到父组件继续完成工作
    workInProgress = returnFiber;
  } while (workInProgress !== null);

  return null;
}

从这里可以看出，React遍历组件树深度遍历走到底了，就算作一个单元，完成当前的渲染工作。

这样做的好处是，可以把遍历工作分散成小单元工作。这也是Fiber的一个重要设计思路。可以避免一次渲染大量组件而阻塞了线程。导致用户操作没有响应。更多关于组件Fiber链表和遍历的介绍可以看这个文章

三、创建Native组件

创建组件是在completeWork里完成的。里面有很多不同类型的组件。里面涉及创建真实渲染的Dom或Native组件的是HostComponent，这个组件最后会调用createInstance来创建组件。

激动人心，终于要创建组件了！

function createInstance() {
  var updatePayload = create(props, viewConfig.validAttributes);
  ReactNativePrivateInterface.UIManager.createView(
    tag, // reactTag
    viewConfig.uiViewClassName, // viewName
    rootContainerInstance, // rootTag
    updatePayload // props
  );
  var component = new ReactNativeFiberHostComponent(tag, viewConfig);

  return component;
}

这里主要是调用了UIManager的createView方法，传入了tag、viewName、rootTag、props参数信息。这里的UIManager实际上是映射到Java里的一个class--- UIManagerModule. 对应的函数如下：

public void createView(int tag, String className, int rootViewTag, ReadableMap props) {
  mUIImplementation.createView(tag, className, rootViewTag, props);
}

mUIImplementation的createView是这样的：

public void createView(int tag, String className, int rootViewTag, ReadableMap props) {
    ReactShadowNode cssNode = createShadowNode(className);
    ReactShadowNode rootNode = mShadowNodeRegistry.getNode(rootViewTag);
    cssNode.setReactTag(tag); // Thread safety needed here
    cssNode.setViewClassName(className);
    cssNode.setRootTag(rootNode.getReactTag());
    cssNode.setThemedContext(rootNode.getThemedContext());
    mShadowNodeRegistry.addNode(cssNode);
    ReactStylesDiffMap styles = null;
    if (props != null) {
      //这里这里！！！ ---元素的样式解析、赋值
      styles = new ReactStylesDiffMap(props);
      cssNode.updateProperties(styles);
    }
    handleCreateView(cssNode, rootViewTag, styles);
  }
}

这一步主要是把样式和一些配置解析出来，方便下一步渲染。

执行handleCreateView之后，会把这些信息转换成一个对象，放入队列里，等待执行。

我们直接跳到执行创建的地方：

NativeViewHierarchyManager.java

public synchronized void createView(
    ThemedReactContext themedContext,
    int tag,
    String className,
    @Nullable ReactStylesDiffMap initialProps) {
    ViewManager viewManager = mViewManagers.get(className);
    View view = viewManager.createView(themedContext, null, null, mJSResponderHandler);
   	viewManager.updateProperties(view, initialProps);
}

可以看出，创建是通过ViewManager来创建View的，这个ViewManager有很多不同的实现类用来实现不同的Native组件，除了官方提供的常见的以外，业务方也可以根据自己需求实现。比如文本Text标签，对应的ViewManager实现是ReactTextViewManager对象。如此得以创建真实的Native节点。

四、操作组件

上面的流程创建出了Native的组件，但是仅仅创建是不行的。还需要根据父子关系来把子组件添加到父组件里面。

所以createInstance之后又会调用UIManager.setChildren来设置组件的父子关系：

对应的安卓代码如下：

 /**
   * 快速添加初始View的接口，子View 的tag 被认为是按元素顺序排列的
   * @param viewTag the view tag of the parent view
   * @param childrenTags An array of tags to add to the parent in order
   */
  @ReactMethod
  public void setChildren(int viewTag, ReadableArray childrenTags)

因为是UI创建阶段，所以只需要执行添加就可以了。setChildren相当于一个简易操作UI的实现。

对UI的操作还有移动、移除等，就需要用到manageChildren：

/**
 * 响应js 添加、移除、移动 父元素的views
 *
 * @param viewTag 父元素的tag
 * @param moveFrom 一个index列表，从哪里移动
 * @param moveTo 和moveFrom对应, 一个index列表，元素移动到哪里
 * @param addChildTags 添加到父元素的 view的tag 列表
 * @param addAtIndices 和addChildTags，指明这些元素插入到哪里的一个index列表。
 * @param removeFrom 一个元素永久移除的列表。对应元素的内容会被回收
 */
@ReactMethod
public void manageChildren(
    int viewTag,
    @Nullable ReadableArray moveFrom,
    @Nullable ReadableArray moveTo,
    @Nullable ReadableArray addChildTags,
    @Nullable ReadableArray addAtIndices,
    @Nullable ReadableArray removeFrom)

而如果是修改元素的样式，比如文字颜色、文字大小等，用到的是updateView

我们来举个例子了解一下流程：

下面是一个RN的demo，其中上面两个是Text元素，下面是一个Button。点击Button之后左边的Hello World会改变颜色。

demo截图

通过log可以看出渲染时元素的创建、添加、更新等步骤：

1.创建Hello World文字：

//创建文字 (虚拟node ，没有创建真实View) Hello World
(UIManager.createView) tag: 3, class: RCTRawText, props: { NativeMap: {"text":"Hello World!"} }
//创建ReactTextView
(UIManager.createView) tag: 5, class: RCTText, props: { NativeMap: {"ellipsizeMode":"tail","allowFontScaling":true,"accessible":true,"lineHeight":50,"height":50,"textAlign":"center","backgroundColor":-7876885,"flex":1,"color":-16776961} }
//添加 文字（3） 到 ReactTextView（5）
(UIManager.setChildren) tag: 5, children: [3]

2.创建zey RN Test文字：

//创建文字 zey RN Test
(UIManager.createView) tag: 7, class: RCTRawText, props: { NativeMap: {"text":"zey RN Test"} }
//创建ReactTextView
(UIManager.createView) tag: 9, class: RCTText, props: { NativeMap: {"ellipsizeMode":"tail","allowFontScaling":true,"accessible":true,"lineHeight":50,"height":50,"textAlign":"center","backgroundColor":-12156236,"flex":1,"color":-65536} }
//添加 文字（7）到 ReactTextView（9）
(UIManager.setChildren) tag: 9, children: [7]

3.把上面两个文字放入到Flex容器中：

//接下来创建的是两个文字的父元素，用了Flex布局
(UIManager.createView) tag: 13, class: RCTView, props: { NativeMap: {"backgroundColor":-5185306,"flexDirection":"row","marginTop":20,"display":"flex"} }
//添加5、9两个文字元素到父元素里
(UIManager.setChildren) tag: 13, children: [5,9]

4.创建下面的Button：

//创建文字 CLICK ME
(UIManager.createView) tag: 15, class: RCTRawText, props: { NativeMap: {"text":"CLICK ME"} }
//创建ReactTextView 下面那个按钮里的
(UIManager.createView) tag: 17, class: RCTText, props: { NativeMap: {"ellipsizeMode":"tail","allowFontScaling":true,"accessible":true,"fontWeight":"500","color":-1,"margin":8,"textAlign":"center"} }
//文字添加到ReactTextView里
(UIManager.setChildren) tag: 17, children: [15]
//下面的button外面还有一层View包裹
(UIManager.createView) tag: 19, class: RCTView, props: { NativeMap: {"focusable":true,"accessibilityState":{},"accessibilityRole":"button","accessible":true,"nativeBackgroundAndroid":{"attribute":"selectableItemBackground","type":"ThemeAttrAndroid"},"borderRadius":2,"backgroundColor":-14575885,"elevation":4} }
//添加到容器
(UIManager.setChildren) tag: 19, children: [17]

5.添加到整体的父容器里：

//整体的父元素
(UIManager.createView) tag: 23, class: RCTView, props: { NativeMap: {"flex":1,"pointerEvents":"box-none","collapsable":true} }
(UIManager.setChildren) tag: 23, children: [13,19]
//再包裹了一层
(UIManager.createView) tag: 25, class: RCTView, props: { NativeMap: {"pointerEvents":"box-none","flex":1} }
(UIManager.setChildren) tag: 25, children: [23]
//最后添加到root上
(UIManager.setChildren) tag: 1, children: [25]

6.点击按钮改变颜色：

//点击“CLICK ME”之后，会改变'Hello World'的颜色，触发了updateView
(UIManager.updateView) tag: 5, class: RCTText, props: { NativeMap: {"color":-39394} }

到这里就介绍了一下React Native的大致渲染原理。若有错误和不足的地方欢迎指出~

还有个有意思的问题是，React和React Native本是同根生，是怎么做到同样的渲染逻辑，渲染出不同的组件的呢？通过源码就可以看得一清二楚了。

打开React库的代码，在ReactFiberCompleteWork.js：

所有的渲染实际Dom相关的函数从一个文件获得。

import {
  createInstance,
  createTextInstance,
  appendInitialChild,
  finalizeInitialChildren,
  prepareUpdate,
  supportsMutation,
  supportsPersistence,
  cloneInstance,
  cloneHiddenInstance,
  cloneHiddenTextInstance,
  createContainerChildSet,
  appendChildToContainerChildSet,
  finalizeContainerChildren,
  getFundamentalComponentInstance,
  mountFundamentalComponent,
  cloneFundamentalInstance,
  shouldUpdateFundamentalComponent,
} from './ReactFiberHostConfig';

这个ReactFiberHostConfig文件会根据实际渲染的内容，映射到对应的文件，从而实现不同的渲染方式，有如下这些文件： React Native有两种方式一个是.native.js一个是.fabric.js

image-20200412232530626

参考文章：

View是如何创建的

「ReactNative」View创建过程浅析

React Fiber初探

The how and why on React’s usage of linked list in Fiber to walk the component’s tree

本文首发于 一粟(https://www.zeyio.com)，欢迎转载，但是必须保留本文的署名和链接。

本文永久链接：https://www.zeyio.com/rn-render/