react render渲染两次，一次为原始state的数据，一次为新获取的数据

最新推荐文章于 2024-06-09 10:37:27 发布
最新推荐文章于 2024-06-09 10:37:27 发布
阅读量5.3k 收藏 2
点赞数
文章标签： javascript 移动开发 网络 ViewUI
原文链接：https://segmentfault.com/a/1190000014841957
版权

在项目中遇到一个问题，componentDidMount在dispath action之后，render渲染state的数据时会渲染两次，一次是原始state，一次是新获取的state，如下图
图片描述
图片描述
图片描述
这是因为react渲染机制造成组建挂载之前，也就是componentDidMount生命周期之前自动获取了原始的state数据，componentDidMount之后state变化已经无法再次获取了
在各种爬坑google后，看到一个很好的思路
图片描述
在私有组件的state判断一下是否是componentDidMount之后，在componentDidMount里面改变state的值，在render判断选择显示
图片描述
图片描述

weixin_34211761
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react组件多次渲染问题
riddle1981的博客
07-02 1万+
react组件的性能优化思考及解决方案
React中获取数据的3种方法及优缺点
10-15
在React的类组件中，常用`componentDidMount()`和`componentDidUpdate()`这两个生命周期方法来处理数据的获取。`componentDidMount()`在组件首次渲染完成之后调用，适合用于初始化数据的获取；`componentDidUpdate()...
React中render方法调用了几次?
Kodomo
03-25 457
调用了1+N次 1.页面初始化的时候调用一次render方法 2.页面状态发生改变时.重新调用render方法来生成一个新的虚拟DOM 3.通过diff算法来对比新新旧虚拟DOM之间的差别,从而进行合并 4.将对比合并过后的虚拟DOM,转换为真实的DOM,挂载到页面的指定位置
React 渲染函数render、初始化函数、更新函数运行了两次，原因为何，如何解决？ React.StrictMode
最新发布
wuyujin1997的博客
06-09 709
我在用 react 写一个 demo ，当我在某个自定义组件的 return 语句之前加上一句log之后，发现：每次页面重新渲染，该行日志都打印了两次！既然是官方为减少我们的bug出现率而提供的、仅在开发阶段出现的API特性，那其实我们可以不用很担心 React组件重复渲染对我们程序性能的影响。，目的是为了更好地找出程序bug，以修复之（一些已被弃用的、受警告的API也可以被发现，改正）。启用范围：可对整个应用（中的组件）启用该模式，也可以对部分组件启用该模式。如果你还是不喜欢，取消该特性即可。
react组件在render里面打印会打印两次的问题
weixin_49847397的博客
07-19 1784
react组件在render里面打印会打印两次的问题。
react 关于this.setState使用时，第一次无法获取数据，第二次获取的数据是第一次触发的疑问...
weixin_34111819的博客
09-19 2315
我使用的是antd组件， compareClickFn(orderCodes, fileNames) { printLog("orderCodes----------"+ orderCodes); printLog("fileNames----------"+ fileNames); this.setState({ show: !this.st...
react 渲染顺序
weixin_30896825的博客
02-07 1245
工作中要对一个表格做再次更新, 可能是渲染后更新或者部分组件渲染之后, 对页面效果做处理 之前对react的理解, 仅仅停留在render渲染. 这次好好理解了下react的生命周期 1 react组件有三种状态 Mounted(已插入真实的DOM)Updating(正在被渲染) 和Unmounted已移除真实DOM 2 每个状态有两种处理方法will(进入状态之前调用) 和 did...
基于React实现表单数据的添加和删除详解
08-31
在上面的代码中，我们创建了一个名为ReactDemo的类组件，该组件包含一个输入框和一个按钮。我们使用了JSX语法来编写组件的模板。 接下来，我们需要实现数据的添加和删除功能。我们可以使用React的状态机制来实现这...
React-Beginners:学习第一次React
03-11
10. **创建React应用（Create React App）**: `create-react-app`是官方推荐的脚手架，用于快速初始化一个新的React项目，预配置好了一些开发环境设置，让开发者可以专注于编写代码。 在"React-Beginners"的学习...
第一次自己成功的使用state案例1
08-08
在这个名为“第一次自己成功的使用state案例1”的实践中，我们将深入探讨如何在React应用中有效地使用`state`来控制组件的状态。首先，我们需要理解React中的`state`是什么。 `state`在React组件中是一个对象，用于...
react处理多次请求_react中render函数会被刷新多次，如何处理？
weixin_33438009的博客
02-21 2868
在componentDidMount函数中有个调用后台接口方法，并把获取的数据设置到state中，当在render方法中输出this.state.data时，前两次会输出一个空，最后一次才会有后台的数据。请问下如何让它不render多次？代码如下：componentDidMount() {this.fetch();}fetch = (params = {}) => {console.log(...
请求时向useState()内添加数值，但是结果还是上一次的原因
weixin_61382400的博客
04-26 875
原因：这是由于React里事件分为合成事件和原生事件，合成事件和钩子函数都是异步的，原生事件是同步的。由于useState是异步事件，所以会出现异步更新问题。在调用setData()的过程中，不要试图立即获取数据状态的变化。问题：React开发中经常会遇到，请求时向useState()内添加新数值，但是结果还是上一次的。调用：使用时，不再用saveData，使用lastQuestionRef.current。解决方案2：使用Object.assign存储数据。解决方案1：使用useRef存储数据。
React 18 componentDidMount重复执行两次的解决方案
草率小猿的博客
08-19 3883
这两天用create-react-app创建了一个新的React项目，在项目运行的时候，似乎有意想不到的事情发生，组件的componentDidMount方法被触发了两次。
componentDidMount周期函数连续执行两次
qq_43704742的博客
06-24 4591
在react中， 当你排除其他props更新两次 且在你运行的时候构造函数和render函数都只调用的了一次，而componentDidMount函数却在后面连续执行了两次，只需要在index.tsx文件中把严格模式组件 React.StrictMode给删掉就可以了， 这是一个经典的问题。 但是目前为什么其会导致componentDidMount函数重复调用，博主还不知道为什么， 因为在博主这次实践中、构造函数和render函数都只调用了一次，只有componentDidMount连续调用了两次。...
【React】- 组件生命周期连续渲染两次问题
HVENLY的博客
07-13 1978
最近在整理生命周期相关的知识内容，然后发现一个奇怪的现象，即组件的生命周期会运行2次！经过确认不是代码问题，于是开始找度娘，终于找到其原因-React中的严格模式，在这里记录一下
解决react组件渲染两次问题
Abdulaziz的博客
09-10 2583
最近做小项目遇到自己写的组件渲染了两次，找半天终于找到解决方法了。这个原因是 react严格模式导致的react严格模式是为了在我们开发过程中帮助我们发现小bug,通过故意重复调生命周期函数让我们发现问题。注意：这仅适用于开发模式。生产模式下生命周期不会被调用两次。
React函数组件渲染两次
qq_45600228的博客
11-21 1031
React函数组件渲染两次
React 初始化加载组件时渲染两次
菠萝萝的博客
07-25 2180
react初始化组件或加载地图类模块重复渲染
react组件渲染两次的问题解决方法
我的博客，不一样的自我表达
04-12 1293
适当的使用PureComponent创建组件可以提高性能,在使用类组件的时侯,继承PureComponent组件,它是依赖于传递给组件的props进行浅比较,当props发生改变的时候,才会重新渲染组件,既然是浅比较,那么在state和props每次都发生改变的额时候,还要使用PureComponent就会对性能产生负面的影响了!可能会有人问，问什么我的组件明明是就让渲染一次，但是实际上却渲染两次呢？类组件的的生命周期函数,当返回值是false的时候,视图不做更新,否则更新!2.初始化state。
react 点击一次按钮增加一个div
05-17
最后在按钮的 onClick 事件处理程序中更新 state，以便在下一次渲染时添加一个新的 div。 下面是一个简单的示例代码： ```javascript import React, { Component } from 'react'; class AddDivButton extends ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值