【React】react的生命周期调用顺序

已于 2024-03-13 09:28:54 修改
阅读量651 收藏 15
点赞数 10
分类专栏： React 笔记 文章标签： react.js 前端 前端框架
于 2024-03-06 12:17:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61049675/article/details/136500708
版权

react的生命周期

一、新生命周期

1、挂载阶段

1.1 constructor

（1）在React组件挂载之前被调用
（2） 初始化函数内部 state或者在this上挂载方法

1.2 getDerivedStateFromProps

（1）为静态方法，不能访问到组件实例this
（2）在创建或更新阶段调用或者在props、state和render方法前调用
（3）返回一个对象来更新 state, 如果返回 null 则不更新任何内容

1.3 render

（1）用于渲染DOM结构
（2）不要在 render 里面 setState, 否则会触发死循环导致内存崩溃

1.4 componentDidMount

（1） 挂载到真实DOM节点后执行，render方法之后执行
（2）是发送网络请求、启用事件监听方法的好时机

2、更新阶段

1.1 getDerivedStateFromProps

（1） 在创建或更新阶段调用或者在props、state和render方法前调用

1.2 shouldComponentUpdate

（1）在组件更新之前调用，可以控制组件是否进行更新， 返回true时组件更新， 返回false则不更新
（2）不要 shouldComponentUpdate 中调用 setState()，否则会导致无限循环调用更新、渲染，直至浏览器内存崩溃

1.3 render

1.4 getSnapshotBeforeUpdate

（1） render后执行，获取组件更新前的信息，即将对组件进行挂载时调用。

1.5 componentDidUpdate

（1）组件更新结束后触发。首次渲染不会执行

3、卸载阶段

1.1 componentWillUnmount

（1）组件卸载前调用
（2）此生命周期是取消网络请求、移除监听事件、清理 DOM 元素、清理定时器等操作的好时机

二、 旧生命周期

1、挂载阶段

constructor

componentWillMount（废弃）

render

componentDidMount

2、更新阶段

componentWillReceiveProps（废弃）

shouldComponentUpdate

componentWillUpdate（废弃）

render

componentDidUpdate

3、卸载阶段

componentWillUnmount

香菜啵子欸
关注
  • 10
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
老生常谈js-react组件生命周期
10-19
下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React 组件生命周期
12-13
React 组件生命周期 在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM 生命周期的方法有： componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval
React组件生命周期详解
12-03
调用流程可以参看上图。 React组件提供了生命周期的钩子函数去响应组件不同时刻的状态，组件的生命周期如下： 实例化 存在期 销毁期 实例化 首次调用组件时，有以下方法会被调用（注意顺序，从上到下先后执行）： getDefaultProps 这个方法是用来设置组件默认的props，组件生命周期只会调用一次。但是只适合react.createClass直接创建的组件，使用ES6/ES7创建的这个方法不可使用，ES6/ES7可以使用下面方式： //es7 class Component { static defaultProps = {} } //或者也可以在外面定义
实例讲解React 组件生命周期
11-20
在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM 生命周期的方法有： componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送A
ReactNative中组件的生命周期
02-25
就像Android开发中的View一样，ReactNative（RN）中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。生命周期回调函数在组件创建之前，会先调用getD
React组件的生命周期函数
m0_71485750的博客
09-25 1万+
注意这个不常用不是我说的, 实在React官网中, 官方列举的。
React生命周期详解
热门推荐
Amelian的博客
08-31 1万+
前言 react生命周期在各个阶段的执行顺序是有所差异的，接下来我们将详细解析react在各个阶段生命周期的执行顺序，以及各个生命周期在组件中充当的作用（以下生命周期指的是react16之后的版本）......
React生命周期执行顺序详解
qq_44699923的博客
08-23 8483
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html
【React】生命周期详解
qq_45677671的博客
04-27 2869
文章目录constructor(props) constructor(props) React组件的构造函数在挂载之前被调用。 在使用React.Component构造函数时： 需要先在添加其他内容前，调用super(props) 用来将父组件传来的props绑定到这个类中 使用this.props将会得到。 官方建议： 不要在constructor引入任何具有副作用和订阅功能的代码，这些应当使用componentDidMount()。 constructor中应当做些初始化的动作 如：初始化
react源码解析11.生命周期调用顺序
zz2000aa的博客
02-09 250
react源码解析11.生命周期调用顺序 视频讲解（高效学习）：进入学习 各阶段生命周期执行情况 函数组件hooks的周期会在hooks章节讲解，这一章的使命周期主要针对类组件，各阶段生命周期执行情况看下图： render阶段： mount时：组件首先会经历constructor、getDerivedStateFromProps、componnetWillMount、render update时：组件首先会经历componentWillReceiveProps、getDerivedStateFrom
react 生命周期实例分析
10-15
主要介绍了react 生命周期,结合实例形式分析了react 生命周期基本原理、操作步骤与注意事项,需要的朋友可以参考下
【React】React-redux多组件间的状态传递
fangyuan__的博客
05-04 858
当某个组件需要使用 store 中的值时，可以通过 connect 中的两个参数来获取，例如这里我们需要使用到 Count 组件的值，可以通过 .count 来从 store 中取值。暴露的 nanoid 是一个函数，我们每一次调用时，都会返回一个不重复的数，用于确保 id 的唯一性，同时在后面的 map 遍历的过程中，我们将 id 作为了 key 值，这样也确保了 key 的唯一性，关于 key 的作用，可以看看 diffing 算法的文章。当前组件需要使用的数据都需要在 connect 中暴露。
react【实用教程】 搭建开发环境（2024版）Vite+React （官方推荐）
最新发布
朝阳39的博客
05-07 268
以项目名reactDemo为例。
Array.map解析
weixin_51676646的博客
05-06 657
Array.map使用
AI绘画Stable Diffusion【艺术写真】：冰雪奇缘，使用ReActor插件实现AI写真
A13531922961的博客
05-07 926
感兴趣的小伙伴，赠送全套AIGC学习资料，包含AI绘画、AI人工智能等前沿科技教程和软件工具，具体看这里。AIGC技术的未来发展前景广阔，随着人工智能技术的不断发展，AIGC技术也将不断提高。未来，AIGC技术将在游戏和计算领域得到更广泛的应用，使游戏和计算系统具有更高效、更智能、更灵活的特性。同时，AIGC技术也将与人工智能技术紧密结合，在更多的领域得到广泛应用，对程序员来说影响至关重要。未来，AIGC技术将继续得到提高，同时也将与人工智能技术紧密结合，在更多的领域得到广泛应用。
前端安全防护实战：XSS、CSRF防御与同源策略详解（react 案例）
qq_35374791的博客
05-03 1072
前端安全防护实战中，主要涉及三个方面：XSS (Cross-Site Scripting) 攻击的防御、CSRF (Cross-Site Request Forgery) 攻击的防御，以及浏览器的同源策略
怎么调用react的生命周期
07-29
调用React的生命周期方法是由React框架自动管理的，不需要手动调用。当组件被创建、更新或卸载时，React会自动调用相应的生命周期方法。以下是React常用的生命周期方法调用顺序： 1. 创建阶段： - constructor(props)：组件的构造函数，在组件被创建时调用，用于初始化组件的状态和绑定事件等操作。 - static getDerivedStateFromProps(props, state)：在组件被创建或接收到新的props时调用，用于根据props更新组件的状态。 - render()：渲染组件的内容。 - componentDidMount()：在组件被挂载到DOM后调用，用于执行一些需要DOM的操作，如数据获取、订阅事件等。 2. 更新阶段： - static getDerivedStateFromProps(props, state)：在组件接收到新的props时调用，用于根据props更新组件的状态。 - shouldComponentUpdate(nextProps, nextState)：在组件更新前调用，用于判断是否需要重新渲染组件，默认返回true。 - render()：渲染组件的内容。 - getSnapshotBeforeUpdate(prevProps, prevState)：在组件更新前调用，用于获取更新前的DOM状态，返回值将作为componentDidUpdate()的第三个参数传递。 - componentDidUpdate(prevProps, prevState, snapshot)：在组件更新后调用，用于执行一些更新后的操作，如更新DOM、发送网络请求等。 3. 卸载阶段： - componentWillUnmount()：在组件从DOM中移除前调用，用于清理组件的副作用，如取消订阅、清除定时器等。 需要注意的是，React 16.3版本之后，一些生命周期方法已经被废弃或替代，具体使用哪些生命周期方法取决于React版本和组件的需求。以上是常用的生命周期方法调用顺序，具体使用时请参考React官方文档或相关教程。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [react生命周期详细介绍](https://blog.csdn.net/luobo2345/article/details/122818947)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值