生命周期

初始化
- componentWillMount（render之前最后一次修改状态的机会）
- render（只能访问this.props和this.state，不允许修改状态和DOM输出）
- componentDidMount（成功render并渲染完成真实DOM之后触发，可以修改DOM）
运行中
- componentWillReceiveProps（父组件修改属性触发）
- shouldComponentUpdate（返回false会阻止render调用）
- componentWillUpdate（不能修改属性和状态）
- render（只能访问this.props和this.state，不允许修改状态和DOM输出）
- componentDidUpdate（可以修改DOM）
销毁
- componentWillUnmount（在删除组件前进行清理操作）

新生命周期

getDerivedStateFromProps
- 第一次初始化组件以及后续更新的过程中（包括自身状态更新、父传子），返回一个对象作为新的state
- 返回null则不需要更新state（除了销毁阶段，其它阶段都会执行）

代码示例：

import React, {Component} from 'react';


export default class Test04 extends Component {
    state = {  // 必须存在状态
        name: 'HQSY',
        age: 24
    }

    static getDerivedStateFromProps(nextProps, nextState) {  // 必须是一个类属性
        console.log(nextState)
        return {  // 必须return
            name: nextState.name.substring(0, 1).toLowerCase()  // 每次更新状态时
        }  // 运行阶段（render）前修改状态
    }

    render() {
        return (
            <div>
                {this.state.name}
            </div>
        );
    }
}

// src/test/Test04.jsx

// 触发时机为update发送的时候，在render之后DOM渲染之前返回一个值，作为componentDidUpdate的第三个参数
import React, {Component} from 'react';


export default class Test04 extends Component {
    state = {
        text: 'aaa'
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log(snapshot)  // return出去的值
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {  // 老的属性和状态
        return 'return'
    }

    render() {
        return (
            <div>
                <button onClick={() => {
                    this.setState({
                        text: 'bbb'
                    })
                }}>Click
                </button>
            </div>
        );
    }
}

中性能优化

代码示例：

// src/test/Test04.jsx

// PureComponent：自动比较新、旧props和state，决定shouldComponentUpdate返回true或false，从而决定要不要render
import React, {PureComponent} from 'react';


export default class Test04 extends PureComponent {

    render() {
        return (
            <div>

            </div>
        );
    }
}