React入门 Part3

组件生命周期

在React中，通常一个组件的生命周期可以分为三个阶段：

1. 挂载阶段；
2. 更新阶段；
3. 卸载阶段；

挂载阶段

这个阶段组件被创建、执行初始化并被加载到DOM中，完成组件的第一渲染。

依次调用到的生命周期函数有：

1. constructor

   此方法是ES 6 class的构造方法，组件被创建时，会首先调用此方法。

   这个方法接受一个props参数，props参数是从父组件传入的属性对象，如果父组件中没有传入属性而组件自身又定义了默认属性，那么这个props属性指向的就是组件的默认属性。

   使用此方法时，必须首先调用super(props)方法，才能保证props被传入组件中。constructor通常用于初始化组件的state以及绑定事件处理方法等工作。

2. componentWillMount

   这个方法在组件被挂载到DOM前调用，且只会被调用一次。

   在这个方法中调用this.setState()不会引起组件重新渲染，因为此时的组件还没有被渲染出来。

3. render

   定义组件时唯一必要的方法。

   在此方法中，根据组件的props和state返回一个React元素，用于描述组件的UI，通常React元素使用JSX语法定义。

   render方法并不负责组件的渲染工作，该方式只是返回一个UI的描述，真正渲染出页面DOM的工作是由React自身负责。

   render是一个纯函数，在这个方法中不能执行任何有副作用的操作，所以不能在render中调用this.setState。

4. componentDidMount

   在组件被挂载到DOM后调用，且只会被调用一次。

   此时已经可以获取到DOM结构，因此依赖DOM节点的操作可以放在此方法中。

   此方法通常还会用于向服务器请求数据。

   在此方法中，调用this.setState()方法，会引起组件的重新渲染。

更新阶段

组件被挂载到DOM后，组件的props和state可以引起组件更新。

props引起的组件更新，本质上是由渲染该组件的父组件引起的，也就是当父组件的render方法被调用时，组件会发生更新过程，组件的props值可能会发生变化。因为父组件可以更新相同属性的props。

state引起的组件更新，是通过调用this.setState()方法来修改组件的state来触发的。

组件更新用到的生命周期方法如下：

1. componentWillReceiveProps

   此方法只在props引起的组件更新过程中，才会被调用。state引起的组件更新过程不会调用此方法。

   参数nextProps是父组件传递给当前组件的最新props。

   在此方法中调用this.setState()方法，只用在组件render及其之后的方法中，this.setState()指向的才是更新后的state，在render之前的方法都是指向更新前的state。

2. shouldComponentUpdate

   此方法用于决定组件是否继续执行更新过程。

   该方法返回true时，组件会继续执行更新过程，该方法默认返回true。

   该方法返回false时，组件会停止执行更新过程，后续的componentWillUpdate、render和componentDidUpdate都不会执行。

   可以通过对nextState和nextProps与当前的state和props对比，以此来判断是否要进行更新，以此来减少渲染次数以提高性能。

3. componentWillUpdate

   此方法在组件render调用前执行，可以作为组件更新发生前执行某些操作的地方。

   在shouldComponentUpdate和componentWillUpdate中都不能调用this.setState()方法，否则会引起循环调用问题。render方法会永远无法被调用到，组件无法正常完成渲染。

4. render

   渲染组件。

5. componentDidUpdate

   此用法在组件更新后被调用，可以作为操作更新后DOM的地方。

   此方法有两个参数，prevProps和prevState代表组件更新前的props和state。

卸载阶段

组件从DOM中被卸载的过程中，只执行一个生命周期方法：componentWillUnmount。

该方法在组件被卸载前调用，可以在这里执行一些清理操作。

只有类组件才有生命周期方法，函数组件是没有的。