React生命周期函数

1、挂载阶段

1.1 constructor

挂载阶段首先执行的函数，通常用于初始化state和绑定普通函数指向。
注：this.props只有在super(props)执行后才可以调用。

constructor(props) {
    super(props);
    this.state = {}
    console.log('constructor')
}

1.2 getDerivedStateFromProps

参数props表示父组件传过来的数据，参数state表示该组件自身的state，返回值是一个对象，会更新该组件的state。

static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps');
    console.log('props', props);
    console.log('state', state)
    return props;
}

1.3 render

编写JSX的地方，并将JSX转化成createElement这种形式，用作生成虚拟DOM

render() {
    console.log('render');
    console.log('state', this.state);
    const {title, lists, show, changeShow} = this.props;
    return <>
        <dl className={show?"friend-group expanded":"friend-group"}>
            <dt onClick={()=>{changeShow(title)}}>{title}</dt>
            {lists.map((item, index)=>{
                return <dd key={index}>{item}</dd>
            })}
        </dl>
    </>
}

1.4 componentDidMount

在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如：通过网络请求获取数据或者添加订阅。

componentDidMount() {
    console.log('componentDidMount');
}

2、更新阶段

2.1 getDerivedStateFromProps

参数props表示父组件传过来的数据，参数state表示该组件自身的state，返回值是一个对象，会更新该组件的state。

static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps');
    console.log('props', props);
    console.log('state', state)
    return props;
}

2.2 shouldComponentUpdate

根据nextProps和this.props、nextState和this.state判断组件是否需要更新。此方法仅作为性能优化的方式而存在。 不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率，且会损害性能。

shouldComponentUpdate(nextProps, nextState) {
    if(this.props.count === nextProps.count) return false;
    else return true;
}

2.3 render

同1.3

2.4 getSnapshotBeforeUpdate

在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(prevProps, this.props);
    console.log(prevState, this.state);
    return null;
}

2.5 componentDidUpdate

会在更新后会被立即调用。首次渲染不会执行此方法。

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(snapshot); //getSnapshotBeforeUpdate的返回值
}

3、卸载阶段

3.1 componentWillUnmount

在组件卸载及销毁之前直接调用。主要用于消除副作用，比如：清除timer、移除事件绑定。

componentWillUnmount() {
    console.log('componentWillUnmount');
}