React 生命周期

参考原文：
https://juejin.im/post/5a062fb551882535cd4a4ce3
https://react.docschina.org/docs/state-and-lifecycle.html

React 生命周期图示

如图，React 生命周期主要包括三个阶段：

• 初始化阶段
• 运行中阶段
• 销毁阶段

在 React 不同的生命周期里，会依次触发不同的钩子函数，下面我们就来详细介绍一下 React 的生命周期函数。

---

一、初始化阶段

1、设置组件的默认属性

static defaultProps = {
    name: 'tom',
    age:23
};
//or
Counter.defaltProps={name:'tom'}

2、设置组件的初始化状态

constructor() {
    super();
    this.state = {number: 0}
}

3、componentWillMount()

组件即将被渲染到页面之前触发，此时可以进行开启定时器、向服务器发送请求等操作

4、render()

组件渲染

5、componentDidMount()

组件已经被渲染到页面中后触发，此时页面中有了真正的 DOM 的元素，可以进行 DOM 相关的操作

二、运行中阶段

1、componentWillReceiveProps()

组件接收到属性时触发

2、shouldComponentUpdate()

当组件接收到新属性，或者组件的状态发生改变时触发。组件首次渲染时并不会触发。

// 该钩子函数可以接收到两个参数，新的属性和状态
// 返回 true、false 来控制组件是否需要更新
shouldComponentUpdate(newProps, newState) {
    if (newState.number<5) {
        return true;
    } else{
        return false;
    }
}

3、componentWillUpdate()

组件即将被更新时触发。

4、componentDidUpdate()

组件被更新完成后触发。页面中产生了新的 DOM 的元素，可以进行 DOM 操作

三、销毁阶段

1、componentWillUnmount()

组件被销毁时触发。这里我们可以进行一些清理操作，例如清理定时器，取消 Redux 的订阅事件等等。

---

下面看一个 Demo，看看一个组件的生命周期，数字表示执行顺序。点击按钮执行为 state 的 number 属性 +1。

class Counter extends React.Component {
    static defaultProps = {
        //1、加载默认属性
        name: 'tom',
        age:23
    };

    constructor() {
        super();
        //2、加载默认状态
        this.state = {number: 0}
    }

    componentWillMount() {
        console.log('3、组件挂载之前');
    }

    componentDidMount() {
        console.log('5、组件挂载完成');
    }

    shouldComponentUpdate(newProps, newState) {
        console.log('6、检查组件是否需要更新');
        if (newState.number<5) {
          return true;
        } else{
          return false;
        }
    }

    componentWillUpdate() {
        console.log('7、组件将要更新');
    }

    componentDidUpdate() {
        console.log('8、组件更新完成');
    }

    handleClick = () => {
        this.setState({
            number: this.state.number + 1
        })
    };

    render() {
        console.log('4、render(组件挂载)');
        return (
            <div>
                <p>{this.state.number}</p>
                <button onClick={this.handleClick}>+</button>
            </div>
        )
    }
}
ReactDOM.render(<Counter/>, document.getElementById('root'));