shouldComponentUpdate调用两次

最新推荐文章于 2023-06-10 11:18:48 发布
最新推荐文章于 2023-06-10 11:18:48 发布
阅读量277 收藏
点赞数
分类专栏： React 文章标签： react.js reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mingketao/article/details/124605307
版权

shouldComponentUpdate调用两次

在这里插入图片描述

为什么生命周期钩子有的会调用多次

react 高版本(比如18)会在开发模式中加入严格模式

注意：
这仅适用于开发模式。生产模式下生命周期不会被调用两次。

严格模式下,这意味着 React 可以在提交之前多次调用渲染阶段生命周期的方法，或者在不提交的情况下调用它们（由于出现错误或更高优先级的任务使其中断）。

渲染阶段的生命周期包括以下 class 组件方法：

  • constructor
  • componentWillMount (or UNSAFE_componentWillMount)
  • componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
  • componentWillUpdate (or UNSAFE_componentWillUpdate)
  • getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • setState 更新函数（第一个参数）

所以严格模式检查仅在开发模式下运行；它们不会影响生产构建。
(build后,是正常调用一次)

参考官方:严格模式(https://zh-hans.reactjs.org/docs/strict-mode.html#gatsby-focus-wrapper)

dupha
关注
专栏目录
React高级教程（es6）——（4）ShouldComponentUpdate的用法
liwusen的博客
12-28 1万+
简介：ShouldCompleteUpdate，下文简称SCU，就是指明什么时候component（组件）需要进行更新。1.常见的SCU的用法：（1）比如在下面的例子中，组件中只有2个值，props.color和state.count可以发生改变，我们可以这样使用SCU。class CounterButton extends React.Component { constructor(props
React 18 中StrictMode多次调用函数式组件体及其hook
老司机的后备箱
06-09 1140
如上文所述，直接脚手架搭建项目，其中场景会用到异步请求一些数据，然后通过函数式组件响应到页面，在试图找到问题所在的前提下，进行简化，先用同步代码测试，已经发现会重复调用函数体。但是在 以及之前的版本就不会出现这种情况，所以我以为是bug，找了好久，因为是两天前才更新的18.1.0，网上也没讲这个的帖子，就去提了issue。地址：https://github.com/facebook/react/issues/24467 （随后被告知是新特性，已被关闭）再现步骤：再现测试代码 Link to code exa
react中避免重复渲染使用shouldComponentUpdate
weixin_44134588的博客
11-12 421
shouldComponentUpdate钩子函数 组件更新机制：父组件更新会引起子组件也被更新 问题：子组件没有任何变化时也会重新渲染 如果避免不必要的重新渲染？ 解决方式：使用钩子函数 shouldComponentUpdate(nextProps, nextState) 在这个函数中，nextProps和nextState是最新的状态以及属性 作用：这个函数有返回值，如果返回true，代表需要重新渲染，如果返回false，代表不需要重新渲染 触发时机：更新阶段的钩子函数，组件重新渲染前执行(s
react(6) shouldComponentUpdate避免组件重复或者无意义渲染
iceking66的博客
10-15 7433
shouldComponentUpdate() shouldComponentUpdate(nextProps, nextState) 使用shouldComponentUpdate()以让React知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重渲，在大部分情况下你应该依赖于默认行为。 当接收到新属性或状态时，shouldComponentUpdate() ...
react性能优化之shouldComponentUpdate的原理剖析
星海拾遗
04-14 2165
同样的，我也不会对这个函数的语法进行分析，主要功能就是页面展示1，2，3，点击之后数字+1。如果组件的props和state没有变化，但是它的父组件render执行了，那么也一并会触发子组件的执行！此时渲染1和2的两个son组件，它们的props是没有变化的，它们的states也是没有变化的，但是它们的render函数还是执行了。其实在图中可以看出，由于使用的是引用对象而且指向的是同一个内存区域，所以在数据更新的时候，所以在作比较的时候永远是“自己等于自己”。如果你的答案是“NO”，那么看下面这个例子。
React生命周期执行顺序详解
静下心来吧，让自己变强大点！
03-30 1万+
目录 一、Ract生命周期 二、React生命周期执行顺序详解 一、组件生命周期的执行次数是什么样子的？？？ 二、组件的生命周期执行顺序是什么样子的？？？ 三、什么时候该用componentWillReceiveProps？ 有状态组件从挂在到卸载经历一下生命周期： constructor() { super() // 必须在定义在内部state之前 } ...
shouldcomponentupdate
最新发布
09-21
shouldComponentUpdate在state和props发生变化时被调用，它接收两个参数：nextProps和nextState。我们可以在这个函数中进行判断，返回一个布尔值，用于决定组件是否需要重新渲染。如果返回false，组件将不会进行重新...
React踩坑之useState的两次渲染
weixin_43845044的博客
07-11 7204
问题背景，函数组件中使用useState后，console.log发现组件重复渲染。 一开始我以为是useState的问题，经查验，发现是index.tsx里<React.StrictMode>的坑 ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); 以下内容，摘自react官网，如果你很忙可
react --- > render持续调用解决方案
栗子好好吃的博客
11-01 1085
问题描述: 在某个组件中.有可能频繁的取数据(但是数据未改变,因此不需要更新). 数据的频繁请求会触发render函数,造成性能消耗 模拟代码如下 export class CommentList extends Component { constructor(props) { super(props); this.state = { comments: [] } } ...
ReactP8_setState详解_React更新机制_render调用优化
cs小白的博客
09-14 1056
React学习D8_setState详细解析_React性能优化
React性能优化之shouldComponentUpdate
高大志leo的博客
11-29 6257
前言： React 构建并维护了一套内部的 UI 渲染描述。它包含了来自你的组件返回的 React 元素。该描述使得 React 避免创建 DOM 节点以及没有必要的节点访问，因为 DOM 操作相对于 JavaScript 对象操作更慢。虽然有时候它被称为“虚拟 DOM”，但是它在 React Native 中拥有相同的工作原理。 当一个组件的 props 或 state 变更，React 会将最新返回的元素与之前渲染的元素进行对比，以此决定是否有必要更新真实的 DOM。当它们不相同时，React 会更
组件更新的底层逻辑
qq_52563729的博客
06-10 1253
更新组件
react如何通过shouldComponentUpdate来减少重复渲染
weixin_33774615的博客
09-22 510
在react开发中，经常会遇到组件重复渲染的问题，父组件一个state的变化，就会导致以该组件的所有子组件都重写render，尽管绝大多数子组件的props没有变化 render什么时候会触发 首先，先上一张react生命周期图： 这张图将react的生命周期分为了三个阶段：生成期、存在期、销毁期，这样在create、props、sta...
shouldComponentUpdate机制
覃大畅的博客
02-23 1万+
文章目录shouldComponentUpdate机制机制使用 ReactNative系列-文章 https://segmentfault.com/a/1190000016494335?utm_source=tag-newest shouldComponentUpdate机制 机制 在react开发中，经常需要对数据state状态进行改变，但是这种方式每当setState的时候都会将所有的组件重新...
componentDidMount周期函数连续执行两次
qq_43704742的博客
06-24 4693
在react中， 当你排除其他props更新两次 且在你运行的时候构造函数和render函数都只调用的了一次，而componentDidMount函数却在后面连续执行了两次，只需要在index.tsx文件中把严格模式组件 React.StrictMode给删掉就可以了， 这是一个经典的问题。 但是目前为什么其会导致componentDidMount函数重复调用，博主还不知道为什么， 因为在博主这次实践中、构造函数和render函数都只调用了一次，只有componentDidMount连续调用了两次。...
使用shouldComponentUpdate进行性能优化
weixin_33753845的博客
11-19 1694
众所周知，react中props,state值的变化，会导致组件重新渲染。使用shouldComponentUpdate就是为了减少render不必要的渲染。 本文着重回答以下问题： 1：如何使用使用shouldComponentUpdate记性优化； shouldComponentUpdate(nexrProps) { if (this.props.num === nexrProps.num)...
react 中的shouldComponentUpdat,componentWillUpdate,componentDidUpdate, render
weixin_38547641的博客
08-17 1212
shouldComponentUpdate(nextProps, nextState) { // nextProps, nextState两者表示当前最新的值 // 而通过state和props获取的值是上一次的值 return nextState.count % 2 === 0 }
【react框架】在类式组件中，setState时尽量不要修改原数据的原因，还有不要直接修改state（知识相关shouldComponentUpdate、PureComponent）
庞囧的博客
06-20 611
这是一个很重要的知识点，如果不加以注意，很有可能会出现bug，别问我为什么知道哈哈。个人觉得这里是react设计的不太好的地方，不过应该也是有原因的，我们只需要记住setState时尽量不要修改原数据就好，下面来看看原因。UI纯粹、数据简单、场景固定不再包含子组件如果一上来就考虑做成PureComponent，日后拓展必然会换掉。
React生命周期方法之 componentDidUpdate
热门推荐
star_zone的博客
03-22 4万+
componentDidUpdate这个生命周期方法可能在开发中用的比较少，但是也相当好用！ 一、最近在用antd-moblie做图片上传，看官方提供的API： 手机端的ImagePicker组件并没有像PC端的那样，在上传事件中提供直接去调后台的action，要是做成选择好几张后，然后那几张同时上传，那就简单，但是业务要求的是一选择就上传，但是组件又不支持，怎么办呢？继续往下看： 首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值