[react] useState的一些小细节

已于 2024-04-10 16:57:45 修改
阅读量493 收藏 3
点赞数 4
文章标签： react.js 前端 javascript
于 2024-04-10 14:17:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Madman528/article/details/137593736
版权

1.无限循环

因为setState修改是异步的,加上会触发函数重新渲染, 如果代码长这样

 一秒再修改,然后重新触发setTImeout, 然后再触发,重复触发循环

如果这样呢

还是会,因为你执行又会重新渲染 

2.异步修改数据

为什么修改多次还是跟不上呢?

函数传参解决

因为是异步修改 ,所以会出现问题,怎么办?用传函数的形式解决

Component – React 中文文档

改成这种形式

 

用回调的方式返回上一个state的值,这样就可以解决了,当然可以简洁些

怎么拿最新结果 

但是最后那个打印还是拿不到最新的结果咋办?

可以用临时变量解决

 也可以套多一层函数形式

小细节

这里数据加了几次,但是只渲染一次,把你要更新的请求合并到一起处理

3.缓存功能

代码如下

每次点击x,y都会加1,但是

为什么?因为每次组件重新渲染let y都会重新赋值!!setState有缓存不会重新赋值 

高山我梦口香糖
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React踩坑之useState的两次渲染
weixin_43845044的博客
07-11 7152
问题背景，函数组件中使用useState后，console.log发现组件重复渲染。 一开始我以为是useState的问题，经查验，发现是index.tsx里<React.StrictMode>的坑 ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); 以下内容，摘自react官网，如果你很忙可
React setState(多次调用setState真的会影响性能吗？)
Hank的博客
07-16 1万+
看了网上很多帖子很多都说setState慎用，因为可能导致页面性能变差。 报着怀疑的态度发现并不如此。 代码和运行结果直接看效果（后面再从源码角度进行分析）涉及到React的事件系统。 现象分析 1.  yes代表渲染成功，可以看到总共渲染了两次。 那么setState可不止2次。  那么什么导致渲染次数的。（首先一个事件发生到结束的过程（比如Click，setTimeout），每次调用se
react中useState多次定义并且每次调用都可以一一对应的原理
油墨香^-^的博客
08-04 331
在这种情况下，每个状态变量和更新函数都被封闭在其对应的 useState 调用中，使得它们能够在组件的生命周期内保持不变。通过这种机制，React 能够维护组件中多个状态的独立性，并确保每个状态变量与其对应的更新函数正确匹配，从而实现了状态的管理和更新。第一次调用 useState 返回的状态变量和更新函数是与 count 相关联的，而第二次调用返回的则是与 name 相关联的。当你调用状态的更新函数时，React 会使用内部的机制将新的状态值与对应的状态变量关联起来，并触发组件的重新渲染。
react setState调用为什么会触发整个组件函数的重新运行
小漠007的专栏
01-07 611
这里的index申明是否可以省略呢，其实也可以，但是这样就得手动给App函数添加index属性，Function是Object的实现，所以它也可以有自己的属性。上面代码里面的index每次调用的时候都会递增，那setState调用时候会触发App的调用那index不是还是会继续递增么？setAge执行会导致App函数重新执行，但是age还是保存之前的结果！然后setState的执行会触发执行它的函数的重新运行，这个怎么写呢？这样无法做到index和我们useState的调用顺序保持一致！
react useState的初始化函数 初始化值为props时的同步问题 | setState函数的使用与异步更新
好好学习天天向上
03-26 1621
的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”。按照惯例，通常将待定状态参数命名为状态变量名称的第一个字母，如 age 为 a。明确这里所说的同步和异步指的是 API 调用后更新 DOM 是同步还是异步的。2.当事件被触发后，通过获取事件源对象，查看事件源对象中是否存在。不是同步地一个一个执行，会一个一个加入队列，然后最后。，修改的是组件下一次渲染的。
react使用useState更新数组失败
qq_35181466的博客
12-27 962
基本类型发生了改变，react会监听到，但是引用类型，如数组内部数据发生改变，react并不会监听到。
React 中的useState 和 setState 的执行机制
weixin_50736511的博客
11-30 717
这里的异步是的是类似异步，不是真正意义上的异步，这里的异步指的是react吧useState 和setState 放在其他代码之后执行，而在17中的setTimeout和原生dom事件中并没有类似异步的执行。对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果（uesstate一样），(只针对17异步更新的时候)可以显著的提高性能： 若每次调用都会被界面重新渲染，效率极低，通过获取多个更新之后，进行批量的更新。@在react18中所有都是异步执行的。
react循环调用useState同步处理方案
刻痕
11-11 9648
目录： 场景介绍 循环调用useState同步处理方案（添加数据） 1. 回调函数 useState(data) 改成：useState(data => 处理data) 2. 抽离函数外使用变量 循环调用usesate内，再调接口添加到原数据方案（添加数据+异步接口） 1. 可改造 setArr为function 2. 封装使用useState的回调函数 3. 借用useEffect监听变化 推荐阅读：react循环遍历useState的数组异步调取接口追加参数后修改原数组处理方案：https:/
React 16.13.1使用useState时会执行两次render的问题
lzc的博客
05-10 9797
示例使用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 (
react的useState的用法
热门推荐
楠姐的博客
09-21 3万+
useState
React进阶：setState()的同步、异步、多次调用
*
03-24 4468
setState()的同步、异步、多次调用
react 短时间内多次修改 state 的值，只执行最后一次解决方案
北芒的博客
07-17 3103
说明 短时间内多次执行重复修改 后调用的 setState() 将覆盖同一周期内先调用 setState 的值 this.state ={ count:0 } --------------------------------------------------- this.setState({ count:this.state.count+1 // 1 }) this.setState({ count:this.state.count+1 //2 }) this.se..
React--》掌握styled-components重塑React样式管理
ztK63LrD的博客
08-04 1146
想象一下，如果你的React组件不仅能自描述其逻辑，还能直接声明自己的样式，这种“所见即所得”的编程体验是不是让人心动不已？styled-components正是这样一把钥匙，它彻底颠覆了我们对React样式管理的传统认知，让样式与组件的结合变得如此自然与和谐。
React（五）：XLS、XLSX文件在线预览
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
08-04 216
【代码】React（五）：XLS、XLSX文件在线预览。
React管理系统整合Cesium避坑指南
奔跑的痕迹的博客
08-04 845
花费了一周时间将React 升级到了最新版本18，同时整合Cesium三维模块到系统中，其中遇到了react 版本升级后模块删改，按照原来的引入方式无法使用的问题，以及Cesium 放入子路由一直404等问题。
【React】详解 App.js 文件
lph159的博客
08-04 883
接下来，我们定义一个函数组件或类组件，通常命名为App。这个组件将组织并渲染其他子组件。return (：为根div添加一个CSS类，方便进行样式定义。和：子组件，分别表示页面的头部和底部。：主内容区域，包含页面的主要内容。通过本文的介绍，我们详细探讨了React应用中的App.js文件，从基本结构到详细解析，并结合最佳实践展示了如何编写和维护。
React 知识点（二）
最新发布
措手不及ya的博客
08-07 579
React 组件、React 组件通信-父子通信、React 组件通信-子父通信、React 组件通信-兄弟通信、React 组件通信-跨组件通信(祖先)、props-children 属性、props-类型校验、React 生命周期、setState 扩展
React（四）：DOCX文件在线预览
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
08-04 318
docx文件在线预览，部分文件预览存在问题。
理解 React Hooks：用例与实践
Bruce__taotao的博客
08-04 946
React Hooks 是 React 16.8 引入的一项强大功能，它们为函数组件引入了状态和其他 React 特性。以下是对 React 常用 Hooks 的详细介绍和使用指南。forwardRef与一起使用，可以自定义父组件通过 ref 访问的子组件内容。}));});return (forwardRef用于将 ref 转发到子组件。用于定义暴露给父组件的实例值。forwardRef 与 useImperativeHandle与vue3 中的使用比较。
useState实现原理
07-25
useState是React中的一个Hook，用于在函数组件中添加状态管理。 useState的实现原理可以简单描述为： 1. 在函数组件中调用useState函数时，React会创建一个状态对象，该对象包含了初始值和一个用于更新状态的方法。 2. React会将这个状态对象存储在内部的状态管理器中，并返回给函数组件。 3. 组件在后续的渲染过程中可以通过调用这个返回的更新方法来更新状态。 4. 当组件重新渲染时，React会根据状态管理器中的数据来获取最新的状态值，并将其提供给组件。 具体实现方案可能会有所不同，但通常会涉及以下步骤： 1. 创建一个状态管理器，用于存储和管理组件的状态数据。 2. 定义一个useState函数，该函数接收一个初始值作为参数，并返回一个数组，数组的第一个元素为当前的状态值，第二个元素为更新状态的方法。 3. 在函数组件中调用useState函数时，会从状态管理器中获取当前的状态值，并返回给组件。 4. 当调用更新状态的方法时，会根据传入的新值更新状态管理器中的数据，并触发组件的重新渲染。 需要注意的是，useState是基于闭包和函数式编程的概念来实现的，具体实现细节可能会有所不同，但核心思想是相似的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值