React Native 核心渲染流程分析(1) - 初识组件系统
本文基于源码：0.40.0
最近把yoga源码看了一遍，它是一个按照Flexbox ( https://www.w3.org/TR/css3-flexbox )规范，利用Web熟悉的API做高效measure的库。本来想做个它在React Native for Android (以下简称RN4A)中的应用与分析，但是在这之前应该先将RN渲染流程搞懂，我们才能去进一步分析如何应用yoga去辅助测量。
如果只是开发Web应用，都要给babel添加React preset ( https://babeljs.io/docs/plugins/preset-react/ )，如果是开发RN，那么它都内置做好了，使用者体会不到。这个preset的作用，就是将JSX语法转化为纯js的代码。转码的结果可以参考React Without JSX ( https://facebook.github.io/react/docs/react-without-jsx.html )。
我拿了一个最普通的文件来做转码示例，原始的React代码如下：
export default class Sample extends Component {
render() { return ( <View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native! </Text>
</View>
);
}
}
AppRegistry.registerComponent('Sample', () => Sample);转码后：（经过部分精简）
var _react = require('react');var _react2 = _interopRequireDefault(_react);var _reactNative = require('react-native');function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {default: obj};
}// ...Sample = function (_Component) {
_createClass(Sample, [{
key: 'render', value: function render() { return (
_react2.default.createElement(_reactNative.View,
{style: styles.container},
_react2.default.createElement(_reactNative.Text,
{style: styles.welcome},
'Welcome to React Native!')));
}
}]); return Sample;
}(_react.Component);
_reactNative.AppRegistry.registerComponent('Sample', function () { return Sample;
});我们可以看到，原先JSX的控件都被React.createElement ( https://facebook.github.io/react/docs/react-api.html#createelement )转化为ReactElement。在ReactElement中使用type字段存放原始对象（在此处就是ReactNative.View/ReactNative.Text），使用props存放childrens、其他传入属性等。
JSX仅是一个语法糖，实际上它们最终都是React.createElement这样的原始写法。
ReactNative的js启动流程
渲染是一个流程，它不会平白无故发生，总是有触发时机。第一次渲染在启动的时候，也是最容易把控到痕迹的时候，我们可以通过它去一步步剖析这个流程：
首先，ReactNative的js代码都需要通过AppRegistry.registerComponent注册对应appkey的Component才能被启动。我们可以在AppRegistry.js中看到它注册了一个对应的回调，在Native启动过程中会通过jsbridge调用AppRegistry.runApplication启动js渲染流程，在js中会调用对应runnable，即后面的renderApplication。(关于RN4A启动流程与jsBridge初始化可以参考：【ReactNative For Android】框架启动核心路径剖析 ( https://zhuanlan.zhihu.com/p/20807406?refer=magilu )与【React Native for Android】jsBridge实现原理 ( http://blog.desmondyao.com/rn-bridge/ ))
在renderApplication时会将传入的Component变成ReactElement，包裹在AppContainer中，这个AppContainer主要用于外面包围一些Debug用的工具（如红盒）。在这之后如上述流程图中一步步走了下去，没什么其他分支，走到ReactNativeMount中就会有料出现了，我们来看看：
//ReactNativeMount.js
renderComponent: function(
nextElement: ReactElement<*>,
containerTag: number,
callback?: ?(() => void)
): ?ReactComponent<any, any, any> {
// 将Element使用相同顶层Wrapper包裹，render方法返回child（即nextElement)
var nextWrappedElement = React.createElement(
TopLevelWrapper,
{ child: nextElement }
);
// 检查之前是否有节点已mount到目标节点上，若有则进行比较处理
var instance = instantiateReactComponent(nextWrappedElement, false);
// 将mount任务提交入回调Queue
ReactUpdates.batchedUpdates(
batchedMountComponentIntoNode,
instance,
containerTag
);
// ...
return component;
}这里将传入的Element都用TopLevelWrapper进行封装，但是它直接透传目标给render函数，可以暂时忽略这层。这里通过instantiateReactComponent生成了一个渲染对象实例，将batchedMountComponentIntoNode()方法提交入回调Queue，它里面最终会走到ReactReconciler.mountComponent里面，直接调用instance.mountComponent。
接下来就有两处关键地方要理解了：
instantiateReactComponent利用输入的ReactElement生成了什么东西？- 利用
instance.mountComponent怎么进行渲染？
如何生成React组件
先解释一下instantiateReactComponent的作用。
从一定角度上来说，React的组件可以分为两种：
- 元组件 框架内置的，可以直接用的组件。在RN上可以理解为就是
View/Image这种。不同平台有不同的元组件实现，在Web上的组件实现可以参考深入理解react（源码分析） ( https://github.com/lanjingling0510/blog/issues/1 )，在RN上见后续分析ReactNative的组件 。 - 复合组件 用户封装之后的组件，一般可以通过
React.createClass来构建，提供render()方法返回渲染目标（ES6中可以继承React.Component)。
在React核心库中提供了instantiateReactComponent.js，供渲染平台调用。它在碰见ReactElement时会根据其中的type生成元组件或者复合组件，逻辑如下：
在React早先的一个版本中，将代码拆分为React与ReactDOM（见Two Packages: React and React DOM ( https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#two-packages-react-and-react-dom )）。核心的React包中包含了基础的createElement/createClass/生命周期等React相关、渲染平台无关的代码。其中绿色的部分是React核心库提供的，蓝色部分是需要渲染平台提供的。
instantiateReactComponent中依次判断了如下流程：
- 当对象的type如果是string或function（至于为何是function，后面ReactNative的元组件中有解释）时走第一层逻辑。当type为string时，渲染平台可以通过
ReactHostComponent.injectGenericComponentClass这个API来注入生成组件逻辑，ReactDOM注入了这层处理，生成ReactDOMComponent，而RN不处理。若type函数的原型链中具有元组件API时，则new一个type实例；否则就生成一个ReactCompositeComponent（即复合组件）; - 当对象为string时（此种情况对应直接写string，而不是用jsx包裹起来的语法），也交由渲染平台处理，可以通过
ReactHostComponent.injectTextComponentClass来注入组件生成逻辑； - 以上都不符合，则报错。
判断函数对象是否元组件，它的原型链中需要提供以下两个API：
mountComponent在首次渲染组件时调用；receiveComponent更新组件内容、属性时调用；
在ReactCompositeComponent中也包含有这两个API供调用，如在mountComponent时：
它会获取render()方法返回的渲染节点，并对它继续走instantiate/mountComponent的流程。如果render()返回的节点还是自定义的复合组件，那这个流程还会向下走，也即：mount流程会递归向下调用直到最后一个元组件。
ReactNative的元组件
我们可以拿任意一个UI控件来入手看，就拿最简单的View来看一下，它的代码在Libraries/Components/View/View.js下，其实是一个复合组件，但是它的render方法返回的是一个元组件，看一下相关代码：
// View.jsconst View = React.createClass({ // 属性声明...
render: function() { return <RCTView {...this.props} />;
},
});const RCTView = requireNativeComponent('RCTView', View, {
nativeOnly: {
nativeBackgroundAndroid: true,
nativeForegroundAndroid: true,
}
});那这个requireNativeComponent做的什么呢？紧接着来看看：
// requireNativeComponent.jsfunction requireNativeComponent(
viewName: string,
componentInterface?: ?ComponentInterface,
extraConfig?: ?{nativeOnly?: Object},
): Function { const viewConfig = UIManager[viewName]; // 由Native传入的对应ViewModule配置
viewConfig.uiViewClassName = viewName;
viewConfig.validAttributes = {};
viewConfig.propTypes = componentInterface && componentInterface.propTypes; // 所有React视图控件的prop都继承View的prop
const nativeProps = {
...UIManager.RCTView.NativeProps,
...viewConfig.NativeProps,
}; return createReactNativeComponentClass(viewConfig);
}在createReactNativeComponentClass.js中，我们可以看到它是返回了一个构造ReactNativeBaseComponent的构造函数。这下知道了为什么上面instantiateReactComponent里面使用的是“type是否为函数”的判断了吧。如果type为函数，并且原型链中含有元组件API，它就会用new一个这个函数实例。
ReactNativeBaseComponent会在mountComponent/receiveComponent时对自己的child进行递归调用，以mount为例：
其中ReactMultiChild负责对节点的children进行递归调用、instantiate/mount，UIManager负责所有生成Native组件的操作。
总结
整个过程就是这样，RN将代码由JSX转化为JS组件，启动过程中利用instantiateReactComponent将ReactElement转化为复合组件ReactCompositeComponent与元组件ReactNativeBaseComponent，利用ReactReconciler对他们进行渲染。
下一篇中会讲述ReactNative如何利用UIManager组建Native的视图结构，敬请期待。