React踩坑之useState的两次渲染

最新推荐文章于 2024-04-10 14:17:32 发布
最新推荐文章于 2024-04-10 14:17:32 发布
阅读量7.2k 收藏 1
点赞数
分类专栏： 前端学习 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43845044/article/details/107267904
版权
本文探讨了在React函数组件中使用useState时遇到的组件重复渲染问题。分析了React的工作原理，强调渲染阶段的生命周期方法不应包含副作用代码，以避免潜在问题。在开发模式下，严格模式通过重复调用相关函数帮助检测副作用，但在生产模式下不会出现这种现象。
摘要由CSDN通过智能技术生成

问题背景，函数组件中使用useState后，console.log发现组件重复渲染。

一开始我以为是useState的问题，经查验，发现是index.tsx里<React.StrictMode>的坑

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById(
最低0.47元/天 解锁文章
我要你好好的。
关注
专栏目录
React hooks 学习笔记 - useState
kotoriyou的博客
05-06 957
使用hook的好处： 1.可以不再使用class（有状态组件） 2.不用考虑复杂的react生命周期钩子函数 3.让this的处理变得简单 例子 普通版本： class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 };...
为什么 React 的函数组件每次渲染执行两次
最新发布
muzidigbig的博客
08-16 1311
为什么 React 的函数组件每次渲染执行两次 React 的函数组件在每次渲染时会执行两次的原因是什么？ React 函数组件为什么会在渲染时执行两次而不是一次？ React 函数组件为什么会执行两次而不是一次呢？有什么好处？
React18的useEffect会执行两次
fl1650379011的博客
03-04 1285
2.仅在开发模式("development")下，且使用了严格模式("Strict Mode")下会触发。为了帮助开发者提前发现重复挂载造成的 Bug 的代码。同时，也是为了以后 React的新功能做铺垫。未来会给 React 增加一个特性，允许 React 在保留状态的同时，能够做到仅仅对UI部分的添加和删除。让开发者能够提前习惯和适应，做到组件的卸载和重新挂载之后， 重复执行 useEffect的时候不会影响应用正常运行。在学习React的过程中，发现写在useEffect中的方法会被执行两次。
React 16.13.1使用useState时会执行两次render的问题
lzc的博客
05-10 9853
示例使用typescript编写一个简单的hello 新建一个Hello.tsx组件： import React, {useState} from 'react' interface IHelloProps { message?: string; } const Hello: React.FC<IHelloProps> = (props) => { console.log('hello before render....') return (
使用useState造成重复渲染，解决办法
weixin_51745081的博客
08-30 608
这个问题可能是由于异步请求的延迟导致的。在点击重置后，重置函数会立即被调用并开始发送异步请求获取新的列表数据，但是在新数据返回之前，上一次请求的数据仍然存在，因此会导致列表数据中包含上一次查询的结果。为了解决这个问题，你可以在重置函数中添加一个清空列表数据的步骤，确保在发送新的请求之前，列表数据被清空。查询完能得到结果，然后点重置，会把刚刚查询的结果再渲染到前面，后面开始是所有的数据。这一行，可以在每次点击重置时清空列表数据，确保新的数据可以正确显示。通过添加 setTableDetailData([])
Hooks中使用useReducer实现表单数据的提交，解决多次使用useState的问题
见贤思齐焉，见不贤内自省
03-21 1641
Hooks中使用useReducer实现表单数据的提交，解决多次使用useState的问题
问：React的useState和setState到底是同步还是异步呢？
beifeng11996的博客
02-14 453
在正常的react的事件流里（如onClick等）setState和useState是异步执行的（不会立即更新state的结果）多次执行setState和useState，只会调用一次重新渲染render不同的是，setState会进行state的合并，而useState则不会在setTimeout，Promise.then等异步事件中setState和useState是同步执行的（立即更新state的结果）
【React Hooks】useState 用法
qq_45677671的博客
05-11 2227
文章目录useState Hook 介绍useState Hook 实例 useState Hook 介绍 useState Hook 让函数组件也可以有 state 状态，并进行读写操作 语法： const [state, setState] = React.useState(initalState) // x代表可以自定义，X代表首字母大写 const [xxx, setXxx] = React.useState(initalValue) useState()说明： 参数：第一次初始化指定的值
浅谈：React Hooks 异步操作
webfunny2020的博客
05-08 2062
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性，Hook 不会影响你对React概念得理解。 恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。从而使得函数式组件从无状态的变化为有状态的。 React 的类型包 @types/react 中也同步把 React.SFC (St
React hooks 学习笔记 - useEffect
kotoriyou的博客
05-08 1428
概念理解：什么是Effect Pure function（纯函数） 给一个 function 相同的参数，永远会返回相同的值，并且没有副作用；这个概念拿到 React 中，就是给一个 Pure component 相同的 props, 永远渲染出相同的视图，并且没有其他的副作用；纯组件的好处是，容易监测数据变化、容易测试、提高渲染性能等； 副作用（Side Effect）是指一个 functio...
React Hooks异步操作二三事
小分享
10-28 1658
React Hooks 是 React 16.8 的新功能，可以在不编写 class 的情况下使用状态等功能，从而使得函数式组件从无状态的变化为有状态的。React 的类型包 @types/react 中也同步把 React.SFC (Stateless Functional Component) 改为了 React.FC (Functional Component)。 通过这一升级，原先 cl...
react setState调用为什么会触发整个组件函数的重新运行
小漠007的专栏
01-07 668
这里的index申明是否可以省略呢，其实也可以，但是这样就得手动给App函数添加index属性，Function是Object的实现，所以它也可以有自己的属性。上面代码里面的index每次调用的时候都会递增，那setState调用时候会触发App的调用那index不是还是会继续递增么？setAge执行会导致App函数重新执行，但是age还是保存之前的结果！然后setState的执行会触发执行它的函数的重新运行，这个怎么写呢？这样无法做到index和我们useState的调用顺序保持一致！
[react] useState的一些小细节
Madman528的博客
04-10 518
因为setState修改是异步的,加上会触发函数重新渲染, 如果代码长这样一秒再修改,然后重新触发setTImeout, 然后再触发,重复触发循环如果这样呢还是会,因为你执行又会重新渲染。
React18, StrictMode下useEffect踩坑修复
weixin_48003149的博客
05-20 1191
React18, StrictMode下useEffect踩坑
（原创）深入解读s React 中的useState Hook 修改了值，但是不重新渲染，不刷新的问题
qq_42753705的博客
12-09 5488
（原创）深入解读s React 中的useState Hook 修改了值，但是不重新渲染，不刷新的问题
react hooks钩子时useState更新不渲染组件，更新的数据是对象，怎么解决
weixin_47411869的博客
03-27 3026
使用深拷贝：在更新 state 时，使用深拷贝将旧的 state 值复制给新的 state，这样一来，新的 state 值的地址与旧的 state 不同，就能够触发重新渲染了。在上述代码中，使用 JSON.parse(JSON.stringify()) 方法对旧的 state 进行深拷贝，并修改其 age 属性后作为新的 state 值，从而可以正常触发重新渲染。使用不可变数据类型：使用不可变的数据类型，如字符串、数字和布尔值，而不是引用类型的对象，这样就不会出现值被修改但地址相同的问题。
React-Hooks：useState的一些用法
xihuhu的博客
11-20 867
1.useState-处理表单元素 处理表单元素这个能力无非就是我们要获取到表单的值 那么我们就要运用useState返回状态和修改状态的功能 这样我们实现功能的思路： 1.用useState初始化内容和写修改内容的函数 2.向input元素上设置value和onChange属性 import React, { useState } from 'react' import ReactDom from 'react-dom' export default function App () {
react中的useState踩坑指南
08-24
在React中使用useState是非常常见的，它让我们能够在函数组件中添加状态。然而，有一些常见的陷阱需要注意。下面是一些踩坑指南： 1. 错误使用数组解构：当使用数组解构语法来访问useState返回的数组时，确保你使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值