ReactNative入门 - 01

ReactNative基本知识整理

• React简介

  1.1虚拟DOM(Virtual DOM)

  传统的Web应用开发，一般都是通过直接操作真实DOM进行更新操作，但对DOM进行直接操作通常是比较昂贵的，所以React为了尽可能减少对真实DOM的操作，采用Virtual DOM， 一个轻量级的虚拟DOM来更新DOM。
  虚拟DOM是React抽象出的一个对象，React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异，然后决定如何最优地更新DOM，这个过程被称为reconciliation。

  1.2Components组件

  所谓组件，就是自己封装的具有独立功能的UI部件。React推荐以组件的方式去构成视图，并建议将功能相对独立的模块抽象为组件。对React而言，界面被分成不同的组件，每个组件都相对独立。
  组件化开发特点:

  • 可组合(Composeable)：一个组件易于和其他组件一起使用，或者嵌套在另一个组件内部。如果在一个组件内部创建了另一个组件，那么父组件拥有它创建的子组件

  • 可重用(Reusable)：每个组件都可以独立出来，被使用在其他相似的UI场景中

  • 可维护(Maintainable)：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护

  • 可测试(Testable)：每个组件都是独立的，那么各个组件可以分开测试

  1.3数据流(Data Flow)

  React采用单向的数据流，即从父节点到子节点的传递，因此更加灵活便捷，也提高了代码的可控性。流程如下：
  Action —>Dispatcher —> Store —> View

• React Native简介

  2.1React Native原理

  原理是在JavaScript中使用React抽象操作系统的原生UI组件，代替DOM元素来渲染界面，比如用<View>组件取代<div>，用<Image>组件替代<img>等。React Native主要运行着两个线程：主线程和JavaScript引擎线程，两个线程之间通过批量化的async消息协议来通信。

  2.2React Native相比Web或原生开发主要特点：

  • APP占用体积小

  • 实现跨平台开发

  • 支持动态更新

  2.3React Native工作原理

  ReactNative框架分为3层，JSX环境层、虚拟DOM层、具体的平台层。Virtual DOM就是一个中间虚拟层，位于JavaScript和实际渲染页面之间。
  虚拟DOM是一个JavaScript的树形结构，主要包含React元素和模块。组件的DOM结构就是映射到对应的虚拟DOM上，React的虚拟DOM采用了batching(批处理)和高效的Diff算法，采用Diff算法，可以将时间复杂度从0(n^3)降到0(n)，从而提高界面构建的性能。
  状态变化 —> 计算差异(Diff算法) —> 界面渲染