react的生命周期

最新推荐文章于 2025-06-29 18:00:36 发布

翟敏1201

最新推荐文章于 2025-06-29 18:00:36 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/chaitong2204/article/details/84941119

react 专栏收录该内容

15 篇文章

订阅专栏

本文深入解析React组件的生命周期，从初始化数据、组件挂载到更新和卸载的全过程，包括willMount、render、didMount、shouldUpdate、willUpdate、didUpdate及willUnmount等关键阶段的自动执行函数，阐述其执行时机与作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.初始化数据

对应的constructor

--------------------------组件挂载-------------------------

2.componentWillMount

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

3.render

页面挂载

3.componentDidMount

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

--------------------------组件更新-------------------------

数据发生变化，组件更新，props与state数据发生变化，流程有一点区别，具体请看下图。

1.shouldComponentUpdate

组件更新前，它会被自动调用（该函数必须返回一个bool值），如果是false,下面的流程则不会执行

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

2.componentWillUpdate

组件更新前，它会自动执行，但是它会在shouldComponentUpdate之后执行

如果shouldComponentUpdate返回true，它才会执行，否则不执行

//组件更新前，它会自动执行，但是它会在shouldComponentUpdate之后执行
    //如果shouldComponentUpdate返回true，它才会执行，否则不执行
    componentWillUpdate(){
        console.log('componentWillUpdate')
    }

3.render执行

4.componentDidUpdate

组件更新完成之后，他会被执行

 componentDidUpdate() {
        console.log('componentDidUpdate')
    }

最后props数据发生变化第一个执行的函数单独谈一下

//一个组件要从父组件接受参数
    //如果这个组件第一次存在于父组件中，不会被执行
    //如果这个组件之前已近存在于父组件中，才会执行
    componentWillReceiveProps() {
        console.log('componentWillReceiveProps')
    }

---------------------------------------------------------

componentWillUnmount

// 当这个组件即将被从页面中移除的时候，会被执行
    componentWillUnmount() {
        console.log('componentWillUnmount')
    }

总结。生命周期就是在某一时刻自动运行的函数