react native总结-2

发表于 | 分类于

react native总结-2

2020年1月3日

React的三大突出特点：组件化、虚拟DOM和单向数据流

React 组件

React中的组件化思想，可以理解为把具有独立功能的UI部分进行了封装。

组件化的优点：

  1. 可组合性:定义了一个UI组件后，可以和其他组件进行并列或者嵌套使用，多个小组件还可以构建一个复杂组件，一个复杂的组件也可以分解成多个功能简单的小组件。
  2. 可重用性:定义后的组件功能是相对独立的，在不同的UI场景中，可以重复使用。
  3. 可维护性:每个组件的实现逻辑都仅限于自身，不涉及其他组件，这样的可维护性较高。

组件的生命周期

  1. 挂载期:一个组件实例初次被创建的过程。
  2. 更新期:组件在创建后再次渲染的过程。
  3. 卸载期:组件在使用完后被销毁的过程。

image.png

挂载期

挂载期有一些方法会被依次触发，列举如下:

  • constructor(构造函数，初始化状态值)
  • getInitialState(设置状态机)
  • getDefaultProps(获取默认的props)
  • componentWillMount(首次渲染前执行)
  • render(渲染组件)
  • componentDIdMount(render渲染后执行的操作)

组件更新

组件更新指的是在组件初次渲染后，进行了组件状态的改变。在实际项目中，组件更新是经常性操作。React在生命周期中的更新过程包括以下几个方法:

  1. componentWillReceiveProps:当父组件更新子组件的state时，该方法会被调用。
  2. shouldComponentUpdate:该方法决定组件state或者props的改变是否需要重新渲染组件。
  3. componentWillUpdate:在组件接受新的props或者state时，即将进行重新渲染前调用该方 法，和componentWillMount方法类似。
  4. componentDidUpdate:在组件重新渲染后调用该方法，和componentDidMount方法类似。

卸载期

生命周期的最后一个过程为组件卸载期，也称为组件销毁期。该过程主要涉及一个方法，即 componentWillUnmount，当组件从DOM树删除的时候调用该方法。

image.png

虚拟DOM

Document Object Model（DOM，文档对象模型）是W3C（World Wide Web Consortium，万维网联盟）的标准，定义了访问HTML和XML文档的标准方法：W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。简单来说，就是用于连接document和JavaScript的桥梁。

Web界面实质上是构建的一棵DOM树，当某一节点发生变化时，React会对当前的DOM树和前一状态的DOM树进行比较，这个比较的算法就是本节讲述的dom-diff算法。

前端渲染UI就离不开DOM操作，然而经常性地操作DOM难免会导致项目性能变差。React在这方面做了优化工作，提供了虚拟DOM。要更新数据就先更新虚拟DOM(虚拟DOM是内存数据，所以 操作速度极快)，再进行dom-diff操作，把最后真正发生变化的数据渲染到真实DOM中，整个过程大大减少了真实DOM操作，同时也大大提高了页面性能。

React在标准dom-diff算法上进行了优化，让时间复杂度从O(n3)减少到了O(n)，这样UI的渲染性能就得到了极大提升。
提升的方法

  1. React认为相同类型的两个组件有类似的DOM树结构，在这种情况下会采用diff算法比较两个DOM树的差异。如果两个组件的类型不同，那么React会认为这两个DOM树结构不同，将之 前的组件直接删除，然后创建新组件。
  2. 同一层次的一组节点，可以通过唯一的key值来进行区分。

单向数据流

在React中，数据流是单向的。
数据的流向是从父组件流向子组件，至上而下。这样能让组件之间的关系变得简单且可预测。

props和state是React组件中两个非常重要的概念。props是外来的数据，state是组件内部的数据。一个组件内，可以接受父组件传递给它的数据，如果props改变了，React会递归地向下遍历整棵组件树，在使用到这个属性的组件中重新渲染；同时组件本身还有属于自己的内部数据，只能在组件内部修改。可以将其与面向对象编程进行类比：this.props就是传递给构造函数的参数，this.state就是私有属性。

单向数据流的好处就是，所有状态变化都是可以被记录和跟踪的，源头容易追溯，没有“暗箱操作”，只有唯一入口和出口，使程序更直观易理解，利于维护。

组件的状态和属性

state和props是React中的两种数据方式，无论是state数据还是props数据只要发生数据改变，就会重新渲染组件。

state

state为状态之意。组件在React中可以理解为是一个状态机，组件的状态就是用state来记录的。相对props来说，state是用在组件内部并且是可以修改的。
React组件可以理解为一个状态机。组件的更新其实就是内部state值的更新，state属性记录着组件的状态，在实际项目中会经常性地对组件进行重新渲染，这就离不开重新设置state属性。

props

props是properties的简称，范围为属性。在React中的组件都是相对独立的，一个组件可以定义接收外界的props，在某种意义上就可以理解为组件定义了一个对外的接口。

最后代码回顾一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//简单组件示例 hello.jsx
import React, { Component } from 'react';
import { render } from 'react-dom';
export default Class hellloComponent extends React.Component {
  render() {
    return (
     <div>
       Hello {this.props.name}.
     </div>
    )
  }
}

//简单组件示例 index.jsx
import React, { Component } from 'react';
import { render } from 'react-dom';
import MyComponent from './myComponent'
export default class extends React.Component {
  render() {
    return (
 <hellloComponent   name="world"/>                      // name 是自定义组件的属性 
    )
  }
}

深入react原理

JSX

JSX（JavaScript XML），是JavaScript的一种拓展语法。可以在JavaScript代码中编写更像XML写法的代码。React官方推荐使用JSX替代常规JavaScript写法，从而让代码更直观，达到更高的可读性。但需要注意的一点是，它不能直接在浏览器中执行，需要经过转换器将JSX语法转为JS之后才可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <div>
          <div>Hello React</div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(
  <HelloMessage />,
  mountNode
);

Babel

Babel原名是6to5，是一个开源的转译工具。它的作用就是把当前项目中使用的ES 6、ES 7和JSX等语法，转译为当下可以执行的JavaScript版本，让浏览器能够识别。简单来说，它是一个转码工具集，包含各种各样的插件。

React事件系统

React事件系统在原生的DOM事件体系上做了一些优化，封装了一个“合成事件”层，事件处理程序通过合成事件进行实例传递。在React的事件系统中，没有把所有事件绑定到对应的真 实DOM上，而是使用委托机制实现了一个统一的事件监听器，把所有的事件绑定到了最外层document上，然后再将事件进行分发。这样极大地减少了内存开销，使运行性能得到极大提升。

在合成事件中，React提供了三种绑定事件的方法:
1. 组件上绑定 2. 在构造函数中绑定 3. 箭头 函数绑定

参考书目

  1. react.js实战
  2. React+Redux前端开发实战