小白看React Native

欢迎你们前往云+社区，获取更多腾讯海量技术实践干货哦~

做者: MelonTeam

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的构成是组件化，因此，生命周期也就围绕着组建的建立，组建的更新，组建的消亡展开的。 组件生命周期大体分为三个阶段： 第一阶段：组建的建立，这是组件第一次绘制阶段，这里会进入组建的初始化函数。 第二阶段：在是组件在运行和交互阶段，这个阶段组件能够处理用户交互，或者接收事件更新界面； 第三阶段：是组件卸载消亡的阶段，组建会作一些销毁函数。 (此模块图片来源于互联网)

10.React Native自定义控件

React Native对插件的支持很是解耦合。好比，咱们想添加一个Video的插件，咱们就能够 直接输入 npm install react- native-video —save,而后再输入 react-native link,就自动向native模块中添加了各类依赖和导包的操做。

以上工程目录就能够看到，video插件已经link到工程目录中了。

11.React Native Debug

红屏

红屏错误只有在debug模式中才会出现。在React Native中一旦出现了红屏问题，就说明你的js代码在运行中出了错误，通常的错误红屏会直接指出出错的行数或者错误的类型以及堆栈信息。若是没有指出的话，那就得依靠调试工具或者log信息了。

Chrome Debug

React Native的调试神器就是Chrome，安装Chrome插件。模拟器选择command + R 真机选择摇一摇，就能够唤出Debug Menu。选择debug in chrome，就能够唤出chrome调试器。chrome调试器很是强大，像普通的单步断点调试，条件调试，堆栈信息等。

Log

Log的信息不管是开发环境仍是生产环境都是很重要的。chrome debug能够直接在命令行中打印出log信息。生产环境，能够选择将log打印到文件中，进行上报分析。

12.Hot Reload

所见即所得是React Native的一大亮点。不管是真机仍是模拟器，只要填好对应的ip。就能够实时显示代码。模拟器选择command + R 真机选择摇一摇，就能够唤出Debug Menu。能够在Debug Menu中选择Hot Reload 的方式。

13.小结

本次带着你们，蜻蜓点水式的观看了React Native的简介，语言以及重要语法，样式，性能分析，重要的state&props ，生命周期等等。这些介绍虽然浅浅介绍，没有深刻探究。可是这样的管中窥豹，但愿你们对React Native有了一点点大概的印象，起到小白入门的做用。

相关阅读

React Native学习笔记
React-Native简介
react-native实践

此文已由做者受权云+社区发布，转载请注明原文出处