react 生命周期之 更新阶段

class Child3 extends Component{

    
    state = {
        count:1
    }
   
    static getDerivedStateFromProps(props, nextState) {
        console.log(1,"将props中的数据映射到state中",props);
        return props;//返回值 ，是根据props 要映射到state中的值
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log("props",this.props,nextProps);
        console.log("state", this.props, nextState);
        console.log(2,"判断当前组件是否需要更新");
        return true;//true 继续完成当前组件更新，false 中断当前组件更新
    }
    //获取更新前的DOM快照 必需加上componentDidUpdate
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log(4,"获取DOM更新前的快照");
        //已经构建好新的虚拟DOM即将去更新真实DOM
        return document.querySelector("#info").innerHTML;
    }
    //处理副作用(请求) prevDom=getSnapshotBeforeUpdate return
    componentDidUpdate(prevProps, prevState, prevDom) {
        console.log(5,"组件列新完成",prevDom);
    }
    render() {
        console.log(3,"构建虚拟DOM");
        const { count,parentInfo} = this.state;
        return <>
            <p id="info">count:{count}------parentInfo：{parentInfo}</p>
            <button onClick={
                () => {
                    this.setState({
                        count:count+1
                    })
                }
             }
            >
                递增count</button>
            </>
    }
}