小白看React Native

MelonTeam

发布于 2018-01-04 16:49:57

2.1K0

发布于 2018-01-04 16:49:57

1.What is React Native

众所周知，产品的需求总是想快速的迭代。但是由于应用分发市场的审核机制（主要是iOS审核），使一些快速迭代的需求只能选择web作为应用场景。虽然web应用已经是一个很成熟的业务，H5的助力也使web应用快速占据移动市场。但是web应用有web应用的瓶颈，在一些交互、性能方面还是无法媲美原生应用。这个时候，React Native的出现，也许给我们带来了一点点新的思路。React Native从出生就带有着，跨平台，快速迭代，节省安装包等标签。在React Native之前，也有很多技术意图跨平台，但是真正做到完全跨平台的技术，准确来说应该是没有的。也许React Native提出的‘Learn once, write anywhere’可行。本次，就以一个小白的视角，来管中窥豹一下React Native。

2.工欲善其事，必现利其器

工欲善其事，必现利其器是自古以来不变的道理。在我们平时开发的时候，一款好的IDE会使我们的开发效率成倍提升。而好的IDE也会助力于好的语言的未来发展。就像oc或者swift，就伴随着xcode；c++或者c#，大家肯定想到visual stutio。

虽然说，开发React Native的IDE有很多。著名的有Nuclide，Sublime，WebStrom。但是，个人比较偏爱于WebStrom，这款号称最聪明的javascript IDE。

3.JSX

//使用JSX
React.render(
    <div>
        <div>
            <div>demodiv>
        div>
    div>,
    document.getElementById('demo')
);

//不使用JSX
React.render(
    React.createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'demo')
        )
    ),
    document.getElementById('demo')
);

JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX，当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。

4.ES6

我们在看React Native的同时，首先得了解React Native使用的语言。ES6作为javascript语言下一代标准，我们稍微了解一下几个关键的ES6的语法，会更好的理解React Native。

let，const

let和var一样都可以声明变量。只是不同都是，let为javascript新增了作用域的概念，用他声明的变量，只在命令所在的代码块内有效。 const也可以用了声明变量，但是声明的是常量。一旦声明，就不能改变其中的值。

class，extends，super

class Dog{

  constructor(){
      this.type = 'Dog';
  }

  eat(){
      console.log(this.type + " eat");
  }
}

let Dog = new Dog();
Dog.eat();//Dog eat

class BigDog extends Dog{

    constructor(){
        super();
        this.type = 'BigDog';
    }
}

let BigDog = new BigDog();
BigDog.eat();//BigDog eat

arrow function

更简洁的函数书写

function(x, y) {
      x++;
      y‐‐;
      return x + y;
} //旧写法

(x, y) => {x++; y‐‐; return x+y} //新写法

default，rest

default很简单，意思就是默认值。大家可以看下面的例子，调用 say() 方法时忘了传参数，传统的做法就是加上这一句 type = type || ‘1’ 来指定默认值。如果用ES6我们而已直接这么写：

function say(type = '1'){
      console.log(type)
}
say()//''1''

最后一个rest语法也很简单，直接看例子：

function say(...types){
    console.log(types)
}
say('1', '2, '3') //["1", "2", "3"]

import export

有了这两个关键字。我们就可以像iOS一样，把不同的js当成不同的模块，需要暴漏出来的export出来。需要引用的import进来。

5.布局

像素密度

React Native 提供的是像素无关的长度单位

Flex in React Native

Flex布局类似于web中的Flex布局，只不过，在React Native中的Flex布局取了web中的Flex布局的子集。

绝对布局和相对布局

React Native中的绝对布局和相对布局，就有点像我们传统终端开发中的布局方式，区别是一个是相对路径，一个是绝对路径。

6.pros&state

state state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化.

props 组件中的props是一种父级向子级传递数据的方式.

7.Virtual Dom

DOM操作很慢是两个原因，一个是因为需要操作具体的native控件，这本身操作就不快，第二是我们处理dom的方式很慢，Virtual Dom解决了我们对Dom的低劣操作，它的想法是，它想让我们不需要直接进行Dom操作，而是将希望展现的最终结果告诉React，React通过js构造一个新的数据结构即Virtual dom进行render，这个Virtual dom 仅仅存在于数据结构中，并没有实际渲染出Dom。当你试图改变显示内容时，新生成的Virtual Dom会与现在的Virtual dom对比，通过diff算法找到区别，这些操作都是在快速的js中完成的，最后对实际Dom进行最小的Dom操作来完成效果，这就是Virtual Dom的概念。总结的来说，就是通过引入新的数据结构，计算出最小移动Dom的方法，再去真实操作Dom，这样的成本是最低的。

8.DIFF算法

传统 diff 算法

计算一棵树形结构转换成另一棵树形结构的最少操作，这是一个复杂且值得研究的问题。传统 diff 算法通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n3)，其中 n 是树中节点的总数。

React diff

传统 diff 算法的复杂度为 O(n3)，显然这是无法满足性能要求的。React 通过制定大胆的策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题。 1.UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。 2拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。 3.对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。基于以上三个前提策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化，事实也证明这三个前提策略是合理且准确的，它保证了整体界面构建的性能。而这种算法的优化，也使算法复杂度，趋紧于O(n) 。大大提升了性能。

9.React Native生命周期

React Native的生命周期和我们终端开发中所接触的生命周期不太一样。React Native的构成是组件化，所以，生命周期也就围绕着组建的创建，组建的更新，组建的消亡展开的。组件生命周期大致分为三个阶段：第一阶段：组建的创建，这是组件第一次绘制阶段，这里会进入组建的初始化函数。第二阶段：在是组件在运行和交互阶段，这个阶段组件可以处理用户交互，或者接收事件更新界面；第三阶段：是组件卸载消亡的阶段，组建会做一些销毁函数。 (此模块图片来源于互联网)