【笔记】2React Native工作原理

1. RN是如何工作的

React的关键特点：Virtual DOM(虚拟DOM)。

Virtual DOM完美中间人的角色

Diff算法计算差异，对差异部分渲染

为了更好地理解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相同，但渲染过程有些区别。

image.png

渲染周期始于React组件挂载之后，然后React进入渲染周期，根据需要渲染组件。

image.png

在渲染阶段，React将开发者在render方法中返回的HTML标记直接按需渲染在页面上。
RN与React不同的是，JavaScript依赖于“桥接”，通过桥接的解析，间接调用宿主平台的基础接口和UI元素（也发就是Objective-C和Java）。由于RN不是在UI主线程运行，他可以在不影响用户体验的前提下执行异步调用。

3. 在RN中创建组件

3.1 编写视图

在使用每一个组件之前，都需要明确的进行导入。

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中，平台特定的接口在提供优秀原生的用户体验方面发挥了巨大作用。