常用的三个生命周期函数：componentDidMount，render，componentWillUnmount

旧生命周期

image.png

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

• 1. constructor()
• 2. componentWillMount()
• 3. render()
• 4. componentDidMount() =====> 常用
     一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

2. 更新阶段: 由组件内部this.setSate()或父组件render触发

• 1. shouldComponentUpdate()
• 2. componentWillUpdate()
• 3. render() =====> 必须使用的一个
• 4. componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

• 1. componentWillUnmount() =====> 常用
     一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

<script type="text/babel">
    //创建组件
    class Count extends React.Component {

        //构造器
        constructor(props) {
            console.log('Count---constructor');
            super(props)
            //初始化状态
            this.state = {count: 0}
        }

        //加1按钮的回调
        add = () => {
            //获取原状态
            const {count} = this.state
            //更新状态
            this.setState({count: count + 1})
        }

        //卸载组件按钮的回调
        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }

        //强制更新按钮的回调
        force = () => {
            this.forceUpdate()
        }

        //组件将要挂载的钩子
        componentWillMount() {
            console.log('Count---componentWillMount');
        }

        //组件挂载完毕的钩子
        componentDidMount() {
            console.log('Count---componentDidMount');
        }

        //组件将要卸载的钩子
        componentWillUnmount() {
            console.log('Count---componentWillUnmount');
        }

        //控制组件更新的“阀门”（不写shouldComponentUpdate的话react会默认返回true）
        shouldComponentUpdate() {
            console.log('Count---shouldComponentUpdate');
            return true
        }

        //组件将要更新的钩子
        componentWillUpdate() {
            console.log('Count---componentWillUpdate');
        }

        //组件更新完毕的钩子
        componentDidUpdate() {
            console.log('Count---componentDidUpdate');
        }

        render() {
            console.log('Count---render');
            const {count} = this.state
            return (
                <div>
                    <h2>当前求和为：{count}</h2>
                    <button onClick={this.add}>点我+1</button>
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                </div>
            )
        }
    }

    //父组件A
    class A extends React.Component {
        //初始化状态
        state = {carName: '奔驰'}

        changeCar = () => {
            this.setState({carName: '奥拓'})
        }

        render() {
            return (
                <div>
                    <div>我是A组件</div>
                    <button onClick={this.changeCar}>换车</button>
                    <B carName={this.state.carName}/>
                </div>
            )
        }
    }

    //子组件B
    class B extends React.Component {
        //组件将要接收新的props的钩子（第一次不会触发）
        componentWillReceiveProps(props) {
            console.log('B---componentWillReceiveProps', props);
        }

        //控制组件更新的“阀门”
        shouldComponentUpdate() {
            console.log('B---shouldComponentUpdate');
            return true
        }

        //组件将要更新的钩子
        componentWillUpdate() {
            console.log('B---componentWillUpdate');
        }

        //组件更新完毕的钩子
        componentDidUpdate() {
            console.log('B---componentDidUpdate');
        }

        render() {
            console.log('B---render');
            return (
                <div>我是B组件，接收到的车是:{this.props.carName}</div>
            )
        }
    }

    //渲染组件
    ReactDOM.render(<Count/>, document.getElementById('test'))
</script>

新生命周期

image.png

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

• 1. constructor()
• 2. getDerivedStateFromProps
     很少用，若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
• 3. render()
• 4. componentDidMount() =====> 常用
     一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

• 1. getDerivedStateFromProps
• 2. shouldComponentUpdate()
• 3. render()
• 4. getSnapshotBeforeUpdate
     很少用，在componentDidUpdate之前调用，可以在这里返回一个值（组件更新之前的值），在componentDidUpdate可以接收这个值。componentDidUpdate(preProps, preState, snapshotValue)
• 5. componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

• 1. componentWillUnmount() =====> 常用
     一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

<script type="text/babel">
    //创建组件
    class Count extends React.Component {

        //构造器
        constructor(props) {
            console.log('Count---constructor');
            super(props)
            //初始化状态
            this.state = {count: 0}
        }

        //加1按钮的回调
        add = () => {
            //获取原状态
            const {count} = this.state
            //更新状态
            this.setState({count: count + 1})
        }

        //卸载组件按钮的回调
        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }

        //强制更新按钮的回调
        force = () => {
            this.forceUpdate()
        }

        //若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
        static getDerivedStateFromProps(props, state) {
            console.log('getDerivedStateFromProps', props, state);
            // return null
            return props
        }

        //在更新之前获取快照
        getSnapshotBeforeUpdate() {
            console.log('getSnapshotBeforeUpdate');
            // 快照值可以是任意值
            return 'atguigu'
        }

        //组件挂载完毕的钩子
        componentDidMount() {
            console.log('Count---componentDidMount');
        }

        //组件将要卸载的钩子
        componentWillUnmount() {
            console.log('Count---componentWillUnmount');
        }

        //控制组件更新的“阀门”
        shouldComponentUpdate() {
            console.log('Count---shouldComponentUpdate');
            return true
        }

        //组件更新完毕的钩子
        componentDidUpdate(preProps, preState, snapshotValue) {
            // 在这里可以接收到快照值，然后做一些操作。
            //比如在这里获取元素的最新高度和传进来的快照值（旧的高度），就可以计算出滚动距离。
            console.log('Count---componentDidUpdate', preProps, preState, snapshotValue);
        }

        render() {
            console.log('Count---render');
            const {count} = this.state
            return (
                <div>
                    <h2>当前求和为：{count}</h2>
                    <button onClick={this.add}>点我+1</button>
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                </div>
            )
        }
    }

    //渲染组件
    ReactDOM.render(<Count count={199}/>, document.getElementById('test'))
</script>