React-组件渲染过程自用

getDefaultProps : 初始化 props
constructor：可以初始化 state 使用 constructor 必须搭配 super()，否则 this 会报错
getDeravedStateFromProps：映射 props 到 state
componentDidMount
shouldComponentUpdate
getSnapshotBeforeUpdate：在更新之前获取快照
componentDidUpdate
componentDidCatch

1、如果上述的钩子都存在，在组件渲染过程中，会先走 constructor 处理里面的逻辑，例：设置初始的state
2、再执行getDerivedStateFromProps 钩子，return prevProps的操作就是将 props 的内容映射到 state 中，使用 getDerivedStateFromProps 钩子，需要先使用 this.state
3、组件渲染的过程中都会走一遍componentDidMount 钩子
4、如果有操作触发state 更新，钩子会从 getDerivedStateFromProps 开始处理
5、再执行shouldComponentUpdate 钩子满足条件后返回 true 触发更新走 render 函数
6、render 之后还要看是否有进一步的更新操作
7、看是否有getSnapshotBeforeUpdate 钩子拦截它的返回值就是 componentDidUpdate 钩子的第三个参数 snapshot
8、不管是否有 getSnapshotBeforeUpdate, 都会继续走到componentDidUpdate 钩子，如果在这个过程中还有操作引起 state 的内容变化，会再次从getDerivedStateFromProps — shouldComponentUpdate — render — getSnapshotBeforeUpdate — componentDidUpdate

class App extends React.Component {
    static defaultProps = {
        name: "amin",
        unmount: false
    }
    constructor(props) {super(props);
        console.log(1)
        this.state = {num: 1}
    }
    static getDerivedStateFromProps (prevProps, prevState) {console.log(2)
        return prevProps
    }
    componentDidMount() {console.log(3)
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {console.log(4)
        console.log(nextProps, 'nextProps')
        console.log(nextState, "nextState")
        console.log(nextContext, "nextContext")
        return true
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {console.log(prevProps, "prevProps")
        console.log(prevState, "prevState")
        console.log(5)
        return 5
    }
    componentDidUpdate(prevProps, prevState, snapshot) {console.log(prevProps, "prevProps")
        console.log(prevState, "prevState")
        console.log(snapshot, "snapshot")
        console.log(6)
        if (this.state.num !== snapshot) {this.setState({num: snapshot})
        }
    }

    componentWillUnmount() {
        // 组件销毁的时候执行的操作
        // 清空定时器 初始化状态管理器的内容等
        // 我们不能在组件销毁后设置 state！页面快速切换，有异步请求的情况下容易报这个错
        this.setState({unmount: true})
    }

    btnClick = () => {const { num, unmount} = this.state
        if (unmount) return 
        // 假装这里是个异步操作  组件卸载的时候 unmount 为 true 不进行下一步操作
        this.setState({num: num + 1})
    }

    render () {const { num} = this.state
        console.log(num, "num")
        return (
            <div>
                <div>{num}</div>
                <button onClick={this.btnClick}>+</button>
            </div>
        )
    }
}

export default App;

可以拦截报错信息，防止出现页面级崩溃，在开发环境中使用，会一闪而过，打包之后在生产环境即可生效

import React from 'react';

class Children extends React.Component {constructor(props) {super(props);

        this.state = {num: 0}
    }

    componentDidMount() {}

    onPress = () => {
        let newNum = this.state.num + 1
        this.setState({num: newNum},()=>{if (this.state.num === 5){throw new Error('崩溃：Did you report the error today')
            }
        })
    }
    render() {
        return (
            <ErrorWrap>
                <button onClick={this.onPress}>
                    <div> 点到崩溃 </div>
                </button>
                正常
            </ErrorWrap>
        )
    }
}

class ErrorWrap extends React.Component {constructor(props) {super(props);
        this.state = {error: null}
    }

    componentDidCatch(error, errorInfo) {console.log(error)
        this.setState({error})
    }

    render () {const { error} = this.state
        if (error) {
            return (
                <div>
                    <div style={{color: 'red'}}>
                        {error && error.toString()}
                    </div>

                </div>
            );
        }
        return this.props.children;
    }
}

class App extends React.Component {render () {
        return (
            <div>
                <ErrorWrap>
                    <Children />
                </ErrorWrap>
            </div>
        )
    }

}

export default App;

组件的生命周期

componentDidCatch