我们知道React Native之所以能在移动设备上运行起来，是因为React Native和原生设备之间有一种交互，以iOS为例，React Native 能够运行起来，全靠 objective-c 和 JavaScript 的交互。对于页面的渲染来说，React的渲染都是以组件为单位，那么这个React组件到底是怎么用原生组件渲染的呢？
<h2>React组件的产生过程与生命周期</h2>
<h4>ReactElement</h4>
用于描述虚拟节点,它们可以通过 React.createElement 方法或 jsx 写法被创建。
ReactElement分为 DOM Element 和 Component Elements 两类，前者是dom组件后者是自定义组件如
class MyText extends React.Component {
render() {
...
}
}
<h4>初始化过程</h4>
上一张图
1.通过render()方法，将element的虚拟根节点渲染到container中
2.接下来根据element的类型分成三种情况，String还是ReactElement中的DOM Element或Component Elements ，依次实例化ReactDOMTextComponent , ReactDOMComponent , ReactCompositeComponent 类
3.ReactDOMTextComponent , ReactDOMComponent , ReactCompositeComponent 用于管理 ReactElement ,负责将不同的 ReactElement 转化成DOM，并更新DOM
<h4>生命周期</h4>
当组件按上文方式初始化后，就有了生命周期
生命周期中的每个阶段都有相应的回调函数，用于控制和操作组件。
<h5>初始化阶段</h5>
图中最上面的框
<b>getDefaultProps</b>和<b> getInitialState </b>
用于初始化组件的属性和状态
<b>componentWillMount</b>
在第一次绘制 render() 之前触发，在整个生命周期中只被触发一次。
<b>componentDidMount</b>
在第一次绘制 render()之后触发，在整个生命周期中只被触发一次。这个函数之后，就进入了稳定运行状态，等待事件触发。
<h5>运行阶段</h5>
<b>componentWillReceiveProps</b>
组件收到新的属性（props）时触发，输入参数 nextProps 是即将被设置的属性，旧的属性还是可以通过 this.props 来获取。常在此处通过调用 this.setState() 来更新的组件状态。
<b> shouldComponentUpdate </b>
组件接收到新的属性和状态改变的话，都会触发，输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样， nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新。
<b> componentWillUpdate </b>
更新渲染前调用,输入参数与 shouldComponentUpdate 一样,但不要在此更新状态
<b> componentDidUpdate </b>
更新渲染后调用，
<h5>卸载阶段</h5>
<b> componentWillUnmount </b>
组件要被从界面上移除的时候，就会触发。一般在次进行一些清理计时器之类的结尾工作
<h2>怎样用原生组件渲染的</h2>
既然React Native能在移动设备上运行，那么上述的react组件是怎么用原生组件渲染的呢？
<h4>react-native应用的启动过程</h4>
<b>1.Native的初始化</b>
以ios为例，包括
读取 JavaScript 源码
初始化模块信息
初始化 JavaScript 代码的执行器，即 RCTJSCExecutor 对象
生成模块列表并写入 JavaScript 端
执行 JavaScript 源码
这五个阶段，这里不是本文的描述点，所以略过。这个地方和react-native的通讯机制打算在之后深入探讨学习。
<b>2.Native端执行初始化React上下文</b>
调用JS端AppRegistry.runApplication(key,params)，key为模块/组件名称.
<b>3.JS端找到注册的对应启动组件，执行renderApplication渲染整个应用</b>
renderApplication会执行如下代码
ReactNative.render(
<AppContainer>
<RootComponent
{...initialProps}
rootTag={rootTag}
/>
</AppContainer>,
rootTag
);
其中AppContainer是一个JS组件，使用View包裹了根组件，开发时工具Inspector、YellowBox都是在这个组件中加载，RootComponent是传入的根组件。
<b>4.找到js端注册的组件</b>
js通过AppRegistry注册组件
AppRegistry.registerComponent('MyApp', rootComponent);
<b>5.Native端渲染组件</b>
以ios为例
self.rctRootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"MyApp"
initialProperties:nil
launchOptions:nil];
位于 AppDelegate 文件中，用户能看到的一切内容都来源于这个 RootView ，所有的初始化工作也都在这个方法内完成。
<h4>原生组件渲染</h4>
应用启动的最后阶段就是JS端开始渲染根组件，那么其它react组件怎么用原生组件渲染的呢？我们先看render()方法做了什么
render() {
return (
<Image source={Styles.picUrl}/>
)
}
将jsx翻译一下就是
render() {
return (
React.createElement(Image, { source: Styles.picUrl })
)
}
回想一下上文中ReactElement的描述
ReactElement.createElement = function (type, config, children){ ... }
在react-native下ReactNative的UI组件通过requireNativeComponent -> createReactNativeComponentClass -> ReactNativeBaseComponent下mountComponent的调用关系，最终在mountComponent中调用UIManager组件创建View
UIManager.createView(tag, this.viewConfig.uiViewClassName, nativeTopRootTag, updatePayload);
UIManager是一个NativeModule，JS端可访问。可通过createView，
updateView方法来创建和更新View。
之后原生组件的实现方法，首先是Image组件JS端代码，需要requireNativeComponent加载原生组件以ios为例
const RCTImageView = requireNativeComponent('RCTImageView', Image);
返回
<RCTImageView
{...this.props}
style={style}
resizeMode={resizeMode}
tintColor={tintColor}
source={sources}
/>
这就创建出原生组件了，之后的事情就是js端的逻辑对原生组件进行控制，这就是react-native的通讯机制的问题了。
网友评论