React componentDidUpdate 和 componentWillReceiveProps 的区别

已于 2022-05-31 10:42:31 修改
阅读量1.1k 收藏
点赞数 1
分类专栏： React 文章标签： react.js javascript 前端
于 2020-07-09 10:10:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36658051/article/details/107221696
版权
参数触发时机更新 state 的方式
componentDidUpdate

componentDidUpdate(preProps,preState,spanshot)

3个参数，上一次的props，上一次的state，快照

在组件接受新的props或新的state之后触发

props和state变化都会触发，所有在此更新状态一定要有判断条件

更新状态是异步的

触发重新render

componentWillReceiveProps

componentWillReceiveProps(nextProps,nextContext)

2个参数nextProps，下一次的props

在组件接受新的props之前触发

仅在props变化时会触发

更新状态是同步的   

不触发重新render

componentWillReceiveProps即将废弃，推荐使用componentDidUpdate  

追影的React开发者
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React生命周期方法之 componentDidUpdate
star_zone的博客
03-22 4万+
componentDidUpdate这个生命周期方法可能在开发中用的比较少，但是也相当好用！ 一、最近在用antd-moblie做图片上传，看官方提供的API： 手机端的ImagePicker组件并没有像PC端的那样，在上传事件中提供直接去调后台的action，要是做成选择好几张后，然后那几张同时上传，那就简单，但是业务要求的是一选择就上传，但是组件又不支持，怎么办呢？继续往下看： 首先...
React 学习笔记总结(三)
IT_Holmes的博客
12-22 1530
1. React( v16.8 版本) 生命周期 2. React( v16.8 版本) 生命周期 更新流程 2.1 三个更新流程 2.2 setState()的生命周期流程(对应上图2号线) 2.3 forceUpdate()的生命周期流程(对应上图3号线) 2.4 父组件render()渲染的生命周期流程(对应上图1号线) 2.5 React( v16.8 版本)生命周期 总结 3. React 新版本的生命周期 4. React(17 新版本钩子函数) getDerivedStateFromProps
React生命周期里componentDidUpdate的基本用法
最新发布
z2000ky的博客
05-23 1645
componentDidUpdate
componentDidUpdate vs componentWillReceiveProps
weixin_33920401的博客
05-08 3324
componentDidUpdate与componentWillReceiveProps区别主要有两点：一是触发的时机；二是在这两个方法中调用更新状态方法后如何更新组件状态。 触发时机 先上一张react生命周期图（图片来源:图解ES6中的React生命周期） componentDidUpdate有两个参数prevProps和prevState，无论是父组件props的修改还是状态的更...
组件化开发-05-生命周期——componentDidUpdate-更新&componentDidMount-载入-须使用setState方法修改状态值&componentWillUnmount-卸载
weixin_44867717的博客
02-01 3358
react生命周期——componentDidUpdate-组件更新 & componentDidMount-组件载入–修改状态的值-不可以直接修改，必须使用setState方法 & componentWillUnmount-组件卸载 组件的生命周期 图解 componentDidMount 完成组件挂载后触发，类似于Vue中mounted 一般用于调用后台接口获取数据并更新state中的数据 组件内部状态的修改必须使用setState方法 componentWillUnmount
React快速入门教程
08-31
React会调用`componentWillReceiveProps`来接收新的props，`shouldComponentUpdate`用于决定是否需要重新渲染，`componentWillUpdate`在更新前执行，`render`再次调用，最后`componentDidUpdate`在更新完成后运行，...
深入探讨前端框架react
09-03
为了提高开发效率，推荐使用React Developer Tools这样的Chrome插件，它可以帮助开发者调试和理解React组件的层次结构和状态。 总的来说，React以其高效的更新机制、强大的组件系统和灵活的生态系统，成为了前端...
react.js学习文档+demo
11-26
每个状态都有对应的生命周期方法，如`componentWillMount()`、`componentDidMount()`、`componentWillUpdate()`、`componentDidUpdate()`和`componentWillUnmount()`，开发者可以在这些方法中插入自己的业务逻辑。...
React中的render何时执行过程
01-19
我们都知道Render在组件实例化和存在期时都会被执行。实例化在componentWillMount执行完成后就会被执行，这个没什么好说的。在这里我们主要分析存在期组件更新时的执行。 存在期的方法包含： – ...
REACT生命周期：componentwillmount(), componentWillReceiveProps()替换方案（2023更新useEffect）
09-03 4541
},[]), useEffect中的cleanup，它会在组件从UI中remove的时候执行，看上去完美适配了componentWillUnmount这个生命周期的作用，但需要注意的是，useEffect多次执行的时候，cleanup其实会在第二次执行的时候也先执行一遍cleanup。,[someValue])，填了依赖的useEffect，当依赖someValue改变的时候，useEffect重新执行，组件被重新evaluated & rendered，依赖也随之被重新evaluated。
前端面试题记录
m0_69892739的博客
05-11 413
防抖：在用户多次触发事件，当用户停止触发事件，将事件执行一次。等待一段时间。节流：在用户多次触发事件，会在多次触发的过程中，间隔执行事件。按照一定的频率执行。函数执行后返回结果是一个内部函数，并被外部变量所引用，如果内部函数持有被执行函数作用域的变量，即形成了闭包。可以在内部函数访问到外部函数作用域。使用闭包，一可以读取函数中的变量，二可以将函数中的变量存储在内存中，保护变量不被污染。因为闭包会把函数中的变量存储在内存中，会对内存有消耗，所以不能滥用闭包，否则会影响网页性能，造成内存泄漏。
简单认识React的生命周期
Shaozia的博客
03-15 329
一. React的生命周期 这里render渲染函数会执行两次，第一次是当组件初始化完成的时候，第二次是当组件完成从数据的修改的时候再执行一次 1.创建和初始化到的生命周期： （1） getDefaultProps（15.6版本的）：初始化props值 （2）componentWillReceiveProps（废弃）: 这是监听props值变化的生命周期 （3） getInitialState...
React生命周期执行顺序详解
静下心来吧，让自己变强大点！
03-30 1万+
目录 一、Ract生命周期 二、React生命周期执行顺序详解 一、组件生命周期的执行次数是什么样子的？？？ 二、组件的生命周期执行顺序是什么样子的？？？ 三、什么时候该用componentWillReceiveProps？ 有状态组件从挂在到卸载经历一下生命周期： constructor() { super() // 必须在定义在内部state之前 } ...
React-hooks的useEffect模拟componentDidUpdate生命周期
codingWeb的博客
08-15 1万+
先回忆一下： class组件中的componentDidUpdate生命周期是初次渲染完后，当接收的props，state改变时或者this.forceUpdate()就会调用 函数组件中的useEffect可以看做 componentDidMount，componentDidUpdate 和componentWillUnmount 这三个函数的组合 useEffect( ()=>{ } ) 只有第一个参数的时候 此时相当于componentDidMount + componentDidUpdat
react生命周期之componentDidUpdate
sw_onload的博客
12-06 2351
官方解释是： componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。 当state或者props改变时触发，需要注意的是一定要做判断条件，否则会陷入死循环。 ...
react中componentWillReceiveProps()在props不改变的时候也可能被调用
热门推荐
淡然坊
06-18 4万+
最近在写react时，需要在props被改变时更新一些东西，所以使用了componentWillReceiveProps方法，但是却发现该方法总是在各种没有改变props的情况下被调用，觉得很奇怪，遂询问我导师（我导师超厉害的！），我导师说这个方法确实有可能在props不改变的情况下被调用，所以需要在方法里手动判断一下this.props和nextProps是否相同，不相同了才执行我的更新方法。于...
React笔记：类似生命周期函数componentDidMount、componentWillUnmount、componentDidUpdate在useEffect中的使用
init_8y0的博客
07-30 2554
文章目录前言一、类似于componentDidMount的useEffect1.对应代码2.使用示例二、类似于componentWillUnmount的useEffect1.对应代码2.使用示例三、类似于componentDidUpdate的useEffect1.对应代码总结 前言 本文为React中useEffect的使用笔记 一、类似于componentDidMount的useEffect 1.对应代码 import { useEffect } from 'react' const Demo
列表找房（四）-默认选中值处理-使用生命周期函数 componentDidUpdate——preProps-父组件传递数据的状态 & preState-组件内部状态数据变化前的状态
weixin_44867717的博客
04-15 729
默认选中值处理-使用生命周期函数 componentDidUpdate——preProps-父组件传递数据的状态 & preState-组件内部状态数据变化前的状态 默认选中值处理 由于前三个筛选条件下拉列表组件是重用的，如果组件标签属性添加一个key，可以保证组件实例对象相互独立，就是切换组件时，他们的构造函数会重新调用，那么相应数据会进行更新 另一种解决方案：使用生命周期函数 componentDidUpdate componentDidUpdate (preProps, preSt
componentWillReceiveProps
05-17
`componentWillReceiveProps` 是 React 组件的一个生命周期方法，用于在组件接收到新的 props 时更新组件的状态。在这个方法中，可以根据新的 props 更新组件的内部状态，或者执行其他的一些副作用操作。 然而，由于 `componentWillReceiveProps` 方法容易被滥用，React 官方在 16.3 版本中将其标记为“过时”（deprecated）。取而代之的是 `UNSAFE_componentWillReceiveProps` 方法，但同样也被标记为“过时”。 推荐的做法是，使用 `componentDidUpdate` 方法来代替 `componentWillReceiveProps` 方法。在 `componentDidUpdate` 方法中，可以通过比较新旧 props 的值，来决定是否更新组件的状态或执行其他操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值