【React】生命周期（最新）

已于 2022-03-17 15:30:53 修改
阅读量1.8k 收藏 7
点赞数
分类专栏： react 文章标签： react.js javascript 前端
于 2022-03-17 15:23:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48982503/article/details/123549760
版权
本文详细介绍了React组件的生命周期，包括constructor、getDerivedStateFromProps、render、componentDidMount、shouldComponentUpdate、getSnapshotBeforeUpdate、componentDidUpdate和componentWillUnmount等关键函数，讨论了它们在组件挂载、更新和卸载过程中的作用，以及如何利用这些生命周期进行性能优化。
摘要由CSDN通过智能技术生成

目录

 各个阶段生命周期函数

constructor()

static getDerivedStateFromProps(nextProps, state) 

render()

componentDidMount()

shouldComponentUpdate(nextProps, nextState)

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdate(prevProps, prevState, snapshot)

componentWillUnmount()

挂载

  • constructor
  • static getDerivedStateFromProps（纯函数，静态方法）
  • render
  • componentDidMount

更新

  • static getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • getSnapshotBeforeUpdate
  • componentDidUpdate

卸载

  • componentWillUnmount

React从v16.3开始弃 componentWillMount、componentWillReceiveProps 、componentWillUpdate 三个钩子函数

 各个阶段生命周期函数

constructor()

constructor() 在React组件挂载之前被调用，在

最低0.47元/天 解锁文章
阿昊在
关注
专栏目录
【react全家桶学习】react的 (新/旧) 生命周期（重点）
蜗牛~~
06-27 8564
相对比vue的生命周期，react显得复杂的多，光从名称上就比vue长，所以做好准备，不要放弃，坚持就是胜利、
react 新版生命周期
泥猴桃的博客
02-23 734
React16 之后有三个生命周期被废弃(但并没有删除) componentWillMount componentWillReceiveProps componentWillUpdate 官方计划在17版本完全删除这三个函数，只保留UNSAVE_前缀的三个函数，目的是为了向下兼容，但是对于开发者而言应该尽量避免使用他们，而是使用新增的生命周期函数替代它们。 目前React 16.8+ 的生命周期氛围三个阶段，分别是挂载阶段，更新阶段，卸载阶段 挂载阶段 constructor: 构造函数，最先被执
react学习——15react生命周期（新）
最新发布
ChenJin_2的博客
06-25 289
react学习——15react生命周期（新）
React 新版生命周期
qq_43750501的博客
07-19 644
新版生命周期 React >= 16.0.0 详情可常看旧版生命周期 [https://blog.csdn.net/qq_43750501/article/details/107447604] React官方认为，某个数据的来源必须是单一的 getDerivedStateFromProps 通过参数可以获取新的属性和状态 该函数是静态的 该函数的返回值会覆盖掉组件状态 该函数几乎是没有什么用 getSnapshotBeforeUpdate 真实的DOM构建完成，但还未实际渲染到页面中。 在
react生命周期(新)
weixin_43613849的博客
10-25 1772
react新旧生命周期区别 ①旧生命周期删除三个钩子：componentWillMount、componentWillUpdate、componentWillReceiveProps这三个钩子在17.版本使用时要加上前缀UNSAFE_，即UNSAFE_componentWillMoun否则会有警告甚至报错。增加使用成本，减少程序员使用。这是因为这些生命周期方法经常被误解和滥用，UNSAFE_不是指不安全，而是在未来版本中（maybe 18.）可能出现bug，特别是异步渲染中。实际很少使用这三个钩子，基本.
vue生命周期和react生命周期对比【推荐】
10-18
本文将深入探讨Vue和React的生命周期函数，并进行对比分析。 首先，Vue.js的生命周期可以分为八个阶段：创建前beforeCreate、创建created、载入前beforeMount、载入mounted、更新前beforeUpdate、更新***d、销毁前...
react 生命周期实例分析
10-15
React生命周期是指React组件在其创建、渲染、更新和销毁过程中经历的一系列方法调用。这些方法提供了在特定阶段插入自定义逻辑的机会，使得我们可以更好地控制组件的行为。本文将深入探讨React组件的生命周期，通过...
react的最新生命周期
process的博客
11-13 3321
文章借鉴地址：这篇文章 缘由 react打算在17版本退出Async/Rendering，提出一种可能被打断的声明周期，而可以被打断的阶段正是实际dom挂载之前的虚拟dom构建阶段，也就是要被去掉的三个生命周期。 旧的： componentWillMount，componentWillReceiveProps，componentWillUpdate 新的： static getDeri...
react生命周期（旧）
Lilico_的博客
01-25 639
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
React的生命周期---新版
前端LV0的博客
10-19 198
何为生命周期 vue中也有生命周期，就是组件从诞生到销毁所经的一系列过程，被称为生命周期。在这些过程中有着对应的钩子函数，在钩子函数中开发者可以注入代码，使组件在生命周期的相应阶段执行所需的逻辑功能。 仅讨论类组件的生命周期，因为函数式组件每次调用都是重新运行函数，立刻销毁旧组件 生命周期以16.0.0版本为界限有了比较多的改动，所以以此分为新旧两版生命周期 旧版生命周期（React < 16.0.0） 示意图如下： 1. constructor 组件最早调用的生命周期函数，这个阶段可以看成“组件
react学习—新版生命周期
xun__xing的博客
04-18 432
新版生命周期一、新版生命周期1.getDerivedStateFromProps2.getSnapshotBeforeUpdate 一、新版生命周期 React >= 16.0.0 相比旧版生命周期： 挂在阶段，新版移除了componentWillMount，使用getDerivedStateFromProps代替。 更新阶段，新版移除了componentWillReceiveProps，仍然使用getDerivedStateFromProps。移除了componentWillUpdate，新增了r
react学习-react的生命周期和触发顺序
蓝冰凌的博客
07-26 1142
React 16是最近一年多React更新最大的版本。除了让大家喜闻乐见的向下兼容的Fiber，防止了客户端react在进行渲染的时候阻塞页面的其他交互行为。Fiber源码速览 参考https://juejin.im/post/5bea68a6e51d450cb20fdd70 新的生命周期过程 先来看看最新版本react的生命周期图： 看看它的变化 新增：getDerivedS...
react总结之最新的生命周期函数
my_love_download的博客
09-02 246
一个组件存在生命周期,在一个阶段中存在一个函数,使得我们在开发中,可以在组件的生命周期中做我们想要做的事情,简单的表述为:组件一般都是有挂载->更新->销毁这三个过程.Angular和Vue的组件生命周期函数也是一样的! 挂载阶段 ---- 挂载阶段 react最新的生命周期函数 constructor:构造函数,最先被执行,通常在构造函数中初始化state对象,或者给自定义的方法绑定this getDerivedStateFromProps:静态方法,当接收到新的属性值的时候,如果需要对st
react中的生命周期(旧)
m0_62976139的博客
04-05 1112
存储本地数据 var Ls=localStorage.getItem("");
react新版完整生命周期
imkaifan的博客
09-07 224
框架在不断的发展，发现有些生命周期不怎么用的上就直接给去除掉了，发现去除掉后，有些功能的确是没有办法写了，于是又增加了新的生命周期，但是新的生命周期用起来比较复杂，直接就出了一些好的模式，直接就可以把这个生命周期给替代掉。 react新版完整生命周期： ...
React新生命周期
weixin_50680057的博客
06-21 228
【React】7、react新生命周期图文详解——最新版
Coding and studying
05-29 1993
👏欢迎来到我的React系列文章 🍭本系列文章从React入门开始，涵盖了React的一切基础，属于是从零开始的一个系列 🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界 🍭本系列会从React v16.8 开始 => 直到React v 18.0 新版旧版一起抓 🍭持续更新中～希望大家能够喜欢，系列文章👉点这里 🌈博客主页👉点这里 👋回见～ 🔥React入门与概览（JSX语法） 🔥面向组件编程——组件实例的三大核心属性state、prop...
react 生命周期最新试例讲解
09-09
下面是React生命周期的最新示例： 1. constructor：组件实例化时调用，用于初始化state和绑定事件处理程序。 ```jsx class MyComponent extends React.Component { constructor(props) { super(props); this....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿昊在

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值