1. RN是如何工作的
React的关键特点：Virtual DOM(虚拟DOM)。
为了更好地理解RN的工作原理，先需要了解一下Virtual DOM (虚拟DOM)。
执行Virtual DOM计算，减少浏览器实际DOM的重复渲染。
Virtual DOM的功能：
- 减少了重复渲染，提升了性能。
-
提供了强大的抽象能力。
强大的抽象能力
RN调用Objective-C的API去渲染iOS组件
调用Java接口去渲染Android组件
而不是渲染到浏览器DOM上。
“桥接”令一切成为可能，它使得React可调用宿主平台开放UI组件。
React组件通过render方法返回了描述界面的标记代码。
- Web平台：将标记代码解析成浏览器的DOM；
- RN平台上：将标记代码解析成特定平台的组件。
2. 渲染周期
生命周期基本与React相同，但渲染过程有些区别。
渲染周期始于React组件挂载之后，然后React进入渲染周期，根据需要渲染组件。
在渲染阶段，React将开发者在render方法中返回的HTML标记直接按需渲染在页面上。
RN与React不同的是，JavaScript依赖于“桥接”，通过桥接的解析，间接调用宿主平台的基础接口和UI元素（也发就是Objective-C和Java）。由于RN不是在UI主线程运行，他可以在不影响用户体验的前提下执行异步调用。
3. 在RN中创建组件
3.1 编写视图
在使用每一个组件之前，都需要明确的进行导入。
| React | RN |
|---|---|
| < div > | < View > |
| < span > | < Text > |
| < ui >, < ul > | < ListView > |
| < img > | < Image > |
3.2 使用JSX
RN通过编写JSX来设计视图，并将视图标记和控制逻辑组合在一起成为一个文件。
使用JSX语法来编写RN项目，JSX认为减少心智负担比文件分离更有用。
RN中.js文件实际上就是JSX文件。
使用JS和JSX有啥区别，如下例子所示:
var HelloMessage=React.createClass({
displayName:"HelloMessage",
render: function render(){
return React.createElement(
"div",
null,
"Hello",
this.props.name
);
}
});
React.render(React.createElement(HelloMessage,{name:"Bonnie"}),mountNode);
//----------------------------------
//通过使用JSX使其更为简洁，使用类XML标记来代替调用React.createElement方法并传入一组HTML属性的做法。
var HelloMessage=React.createClass({
render:function(){
// 返回标记而不是调用createElement方法
return <div> Hello {this.props.name}</div>;
}
});
//我们不再需要调用createElement方法
React.render(<HelloMessage name="Bonnie"/>,mountNode)
//------------------------------------
以上的两段代码最终被渲染成以下的HTML
<div> Hello Bonnie </div>
3.3 原生组件的样式
React和宿主平台之间的“桥接”包含了一个缩减版的CSS子集的实现。
这个CSS子集主要通过flexbox进行布局，做到了尽量简单化，而不是去实现所有的CSS规则。
RN做到了样式规范的一致（因为只需要适配安卓和iOS两种类型设备）。
RN也坚持使用内联样式，通过JavaScript对象进行样式组织。
例子：
//定义一个样式
var style={
backgroundColor:'white',
fontSize:'16px'
}
//然后使用它
var tv=(<Text style={style}> A styled Text </Text>);
4. 宿主平台接口
使用Web环境的React与RN'''最大的不同'''应该就在宿主平台的接口了。
React Native的桥接不可能暴露宿主平台全部的接口，如果你需要使用一个未支持的特性，完全可以自己动手添加到RN中。
RN中，平台特定的接口在提供优秀原生的用户体验方面发挥了巨大作用。
