React框架（八）生命周期函数详解

含义

生命周期函数指在某一个时刻组件会自动执行的函数，如render()函数（组件发生变化时重新渲染）、constructor()函数（组件被创建的时候自动调用，是ES6中含有的函数，并不是React特有，与生命周期函数没有太大区别）

函数介绍

过程：初始化、挂载、更新、卸载

1. 初始化

利用constructor()函数进行初始化，设置属性props和状态state

2.挂载

 =>当组件即将被挂载到页面的时刻自动执行，组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。
    componentWillMount() {
        console.log('componentWillMount');
    }
    
=>react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。
	render(){
	...
	}
    
=> 组件被挂载之后自动执行，只调用一次，可以在此请求数据。
    componentDidMount() {
        console.log('componentDidMount')
    }

3. 更新

props或state发生变化的时候被执行

=>执行条件：组件从父组件接受新的props
=>执行时刻：只要父组件的render函数被执行了，子组件的这个生命周期函数就会被执行
=>（或者说该组件第一次存在于父组件中不会执行，而之前存在该组件，父组件render执行时该函数就会执行）
    componentWillReceiveProps(nextProps, nextContext) {
        console.log('componentWillReceiveProps')
    }

=>组件更新之前自动执行.
=>可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，
=>这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候.
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log('shouldComponentUpdate');
        return true; // 告诉组件是否更新，如果是false，页面不会发生变化
    }

=>组件更新之前，shouldComponentUpdate之后，当shouldComponentUpdate返回值为true时执行，此时可以修改state
    componentWillUpdate(nextProps, nextState, nextContext) {
        console.log('componentWillUpdate')
    }

=>执行render()函数

=>组件更新完成之后执行
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('componentDidUpdate')
    }

4. 卸载

=>当该组件即将从页面中被剔除时执行
    componentWillUnmount() {
        console.log('componentWillUnmount-TodoItem')
    }

生命周期函数测试

该项目在我的码云仓库：React框架中所有生命周期函数的测试及使用

（每次操作之后清空控制台信息，便于观察）
1.在初始时，无子组件，执行挂载过程
2.输入内容后，执行更新过程

3.点击提交按钮

4.继续输入，子组件的componentWillReceiveProps函数被调用

5.继续提交，依旧执行刚刚的生命周期函数

6.点击，依次删除列表项

7.删除最后一项，可以发现不再执行componentWillReceiveProps，是因为此时经过父组件的render函数后，页面上已经不存在该组件，只有子组件被销毁的生命周期函数在执行

生命周期函数的使用场景

1. 所有生命周期函数除了render函数外都可以不存在，原因在于：每个组件都继承于Component这个组件，里面含有所有周期函数，但并没有内置render函数，必须要子组件来实现。
2. 当涉及到修改作用域的函数时，将该函数在constructor函数中绑定好，避免子组件多余的渲染，因为该函数只执行一次。
3. 利用shouldComponentUpdate函数提升性能

shouldComponentUpdate(nextProps, nextState, nextContext) {
        if (nextProps.con !== this.props.con) { =>如果将要改变的属性不等于当前的属性，则返回真，子组件可以重新执行render
            return true;
        } else {
            return false; =>如果将要改变的属性等于当前的属性，则子组件不需要重新渲染，节省性能
        }
    }

4. 利用React发送ajax请求，放在以下函数中：

componentDidMount（只执行一次，推荐使用）
constructor（只执行一次，允许使用）
componentWillMount（在使用React native时会有冲突，避免使用）
render（页面每渲染一次，都会重新执行，禁止使用）

这里需要安装axios模块，在项目目录中使用npm install axios进行安装。
其使用参见：axios中文文档