[react] useState的一些小细节

1.无限循环

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

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


如果这样呢

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

2.异步修改数据

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

函数传参解决

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

Component -- React 中文文档

改成这种形式

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

怎么拿最新结果

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

可以用临时变量解决

也可以套多一层函数形式

小细节

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

3.缓存功能

代码如下

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

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

相关推荐
袁煦丞几秒前
JuiceSSH你的口袋里的Linux操控台:cpolar内网穿透实验室第530个成功挑战
前端·程序员·远程工作
鹏多多4 分钟前
深入解析vue的transition过渡动画使用和优化
前端·javascript·vue.js
程序员小续16 分钟前
React 源码解读流程:从入口到渲染的全链路揭秘
前端·javascript·面试
江城开朗的豌豆20 分钟前
React key的隐藏技能:key改变时究竟发生了什么?
前端·javascript·react.js
JarvanMo28 分钟前
我用 Ktor 替换了 Retrofit-我的网络代码减少了一半
前端
excel33 分钟前
WebGL 入门到进阶全解析:从 Canvas 上下文到 3D 绘制与 WebGL2 新特性
前端
掘金安东尼44 分钟前
用 WebGL + Solid.js 构建混合材质 Shader
前端·webgl
恋猫de小郭1 小时前
Flutter 小技巧之有趣的 UI 骨架屏框架 skeletonizer
android·前端·flutter
江城开朗的豌豆1 小时前
玩转React Hooks
前端·javascript·react.js
阿酷tony1 小时前
教育场景下禁用html5播放器拖动进度条的例子
前端·html·html5·在线教育场景·禁止播放器拖动