!
也想出现在这里? 联系我们
广告位
当前位置:首页>技术分享>编程技术>react生命周期总结

react生命周期总结

react生命周期总结

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

1.componentWillMount

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

2.componentDidMount

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

react生命周期总结

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参数,不会执行

react生命周期总结

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

react生命周期总结

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

Unmounting

componentDidUpdate

* 组件被剔除页面时执行

react生命周期总结

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;

给TA打赏
共{{data.count}}人
人已打赏
编程技术

react使用react-redux

2022-9-28 20:41:45

编程技术

vue3中使用$forceUpdate

2022-9-29 20:40:45

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 2651636361@qq.com 或点击右侧 私信:少羽 反馈,我们将尽快处理。
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索