React

首先用React写一个HelloWorld组件，代码如下：

var HelloWorld = React.createClass({
  getInitialState: function() {
    return {type: 'say:'};
  },
  render: function() {
    return React.createElement("div", null,this.state.type, "Hello ", this.props.name);
  }
});
React.render(React.createElement(HelloWorld, {name: "John"}), document.getElementById("container"));

如果最终渲染到浏览器，HelloWorld组件会通过React.render进行解析，最后会变成一下的Render Tree

<div data-reactid="0">
    <span data-reactid="0.0">say:</span>
    <span data-reactid="0.1">Hello </span>
    <span data-reactid="0.2">John</span>
</div>

但是如果是RN页面，是不需要解析为原生DOM元素的，因为RN页面的组件和Native的视图一一映射，最终是要解析为能让Native渲染并布局指定View的命令，具体请往下看。

Native 部分

1.React页面写完后，经过打包成为JSBundle文件，到这里前端的工作告一段落了。
RN页面的初始化是从Native发起的，Native使用JS引擎（JavaScriptCore/V8）将JSBundle加载到客户端的JS运行环境JSContext里。接着Native会将提供给JS的各个Module的Api转化成配置列表，注入到JSBundle里。这份配置里其中有一个Module较UIManage,UIManage里包含了Native所有View的映射列表，并提供了创建View、设置子View等视图布局的API。

所有Module的列表

UIManage配置信息

2.配置文件注入到JSBundle之后，Native会告诉JS可以开始运行页面，JS收到通知后开始运行HelloWorld组件的Render方法，根据UIManage的配置文件将每个组件解析为UIManage的API调用,然后将API调用列表以批处理的方式，通过JSBridge调用Native来执行。
下面是其中一个组件的Api调用Json:

buffer

<__NSArrayM 0x60c00024b8e0>(
51
)
,
<__NSArrayM 0x60c00024b730>(
5
)
,
<__NSArrayM 0x60c00024b850>(
<__NSArrayM 0x60c00024b550>(
3,
RCTText,
1,
{
    accessible = 1;
    allowFontScaling = 1;
    color = 4286846340;
    ellipsizeMode = tail;
    fontSize = 18;
    padding = 8;
    textAlign = center;
}
)
)
,
1
)

moduleIDs
根据上面的Module列表，’51’就是UIManage

1
2
3

<__NSArrayM 0x60c00024b8e0>(
51
)

methodIDs
根据上面的UIManage配置信息，‘5’就是CreateView方法

1
2
3

<__NSArrayM 0x60c00024b730>(
5
)

paramsArrays
RCTText是Native对应的View，其他就是布局参数

<__NSArrayM 0x60c00024b850>(
<__NSArrayM 0x60c00024b550>(
3,
RCTText,
1,
{
    accessible = 1;
    allowFontScaling = 1;
    color = 4286846340;
    ellipsizeMode = tail;
    fontSize = 18;
    padding = 8;
    textAlign = center;
}
)
)