首页 / 前端 / React.js / react生命周期总结
react生命周期总结
歪脖37684 React.js
157浏览
2022-04-22 22:37:01

Mounting:当页面打开时,执行mount生命周期钩子

1.componentWillMount

* 在组件即将被挂载到页面时,自动执行

2.componentDidMount

* 组件被挂载到页面之后,自动执行

Updating:页面中state或者子组件props被更新时执行

1.shouldComponentUpdate

* 组件被更新之前,会自动执行;

* 需要return一个布尔类型的值;

* 返回 true执行更新,false不执行更新;

shouldComponentUpdate(){
  console.log('update-1.shouldComponentUpdate')
  return true;
}

2.componentWillUpdate

* 组件被更新之前,shouldComponentUpdate之后执行;

* 如果shouldComponentUpdate返回true执行;

* 如果shouldComponentUpdate返回false则不执行;

3.componentDidUpdate

* 组件更新完成后,自动执行

4.componentWillReceiveProps

* 组件从父组件接收参数props

* 父组件render被重新执行后

* 子组件的componentReceiveProps就会被执行

* 重要:

* 如果这个组件第一次出现在父组件中,componentReceiveProps不会被执行

* 如果这个组件已经存在于父组件中,componentReceiveProps才会被执行

* 顶级父组件没有接收props参数,不会执行

如上图demo中数字组件已经出现在页面中,控制台输出子组件的componentReceiveProps生命周期钩子打印。

首次点击+1时数字组件才会出现,此时控制台没有输出componentReceiveProps生命周期打印。

Unmounting

componentDidUpdate

* 组件被剔除页面时执行

React16废弃了哪些生命周期?为什么?

React16废弃的生命周期有3个will:

componentWillMount
componentWillReceiveProps
componentWillUpdate

废弃的原因:

在React16的Fiber架构中,调和过程会多次执行will周期,不再是一次执行,失去了原有的意义。

此外,多次执行,在周期中如果有setState或dom操作,会触发多次重绘,影响性能,也会导致数据错乱。

DEMO:

父组件Lifecycle:

import { Component } from "react";
import ShowNum from './ShowNum'

class Lifecycle extends Component {

    constructor(props){
        super(props)
        this.state = { 
            showNum: false,
            num: 0,
            str: '' 
        }
        this.add = this.add.bind(this);
        this.updateStr = this.updateStr.bind(this);
        this.removeNum = this.removeNum.bind(this);
        console.log('1.我是构造函数 constructor');
    }

    render(){
        console.log('3.render')
        return (
            <div>
                <p>react生命周期</p>
                {
                    this.state.showNum ? <ShowNum num={this.state.num}></ShowNum>: ''
                }
                <h3>{this.state.str}</h3>
                <p><button onClick={this.add}>数字加1</button></p>
                <p><button onClick={this.removeNum}>移除num子组件</button></p>
            </div>
        )
    }

    removeNum(){
        this.setState(() => ({showNum: false}))
    }

    updateStr(){
        this.setState(prevState => {
            return {
                str: '我被更新了'
            }
        })
    }

    add(){
        this.setState(prevState => {
            return {
                showNum: true,
                num: ++prevState.num
            };
        })
    }

    // 在组件即将被挂载到页面时,自动执行
    componentWillMount(){
        console.log('2.componentWillMount, 将要废弃')
    }

    // 组件被挂载到页面之后,自动执行
    componentDidMount(){
        console.log('4.componentDidMount')
    }

    // 组件被更新之前,会自动执行,
    // 需要return一个布尔类型的值
    // 返回 true执行更新,false不执行更新
    shouldComponentUpdate(){
        console.log('update-1.shouldComponentUpdate')
        return true;
    }

    // 组件被更新之前,shouldComponentUpdate之后执行;
    // 如果shouldComponentUpdate返回true执行
    // 如果shouldComponentUpdate返回false则不执行
    componentWillUpdate(){
        console.log('update-2.componentWillUpdate, 将要废弃');
    }

    // 组件更新完成后,自动执行
    componentDidUpdate(){
        console.log('update-3.componentDidUpdate');
    }

    // 父组件没有接收props参数,所以不会执行
    componentWillReceiveProps() {
        console.log('父组件-componentWillReceiveProps, 将要废弃');
    }

}

export default Lifecycle;

子组件ShowNum:

import { Component } from "react";

class ShowNum extends Component {

    render(){
        let { num } = this.props;
        return (
            <h1>{num}</h1>
        )
    }

    /**
     * 组件从父组件接收参数props
     * 父组件render被重新执行后
     * 子组件的componentReceiveProps就会被执行
     * 重要:
     * 如果这个组件第一次出现在父组件中,componentReceiveProps不会被执行
     * 如果这个组件已经存在于父组件中,componentReceiveProps才会被执行
     */
    componentWillReceiveProps(){
        console.log('子组件-componentReceiveProps, 将要废弃');
    }

    // 组件被剔除页面时执行
    componentWillUnmount(){
        console.log('子组件-componentWillUnmount');
    }

}

export default ShowNum;
相关推荐