useState() 踩坑 ---- 状态异步更新问题

3,840 阅读1分钟

问题分析

比如我们把接口返回的数据,使用 useState 储存起来,但是当后面去改变这个数据的时候,每次拿到的都是上次的数据,无法实时更新。

useState() 是异步函数 ,我们 setState() 后不会立刻对值进行改变,而是会将其暂时放入 pending 队列中。react 会合并多个 state ,然后值 render 一次。

到底是异步还是同步,why有时候又觉得是同步的?

1850.png

只要你进入了 react 的调度流程,那就是异步的。只要你没有进入 react 的调度流程,那就是同步的。什么东西不会进入 react 的调度流程? setTimeout setInterval ,直接在 DOM 上绑定原生事件等。这些都不会走 React 的调度流程,你在这种情况下调用 setState ,那这次 setState 就是同步的。 否则就是异步的。

解决方案

使用 useRef() ,对于一些需要更新后立即获得新值的数据,我们可以选择用 ref 对象来存储!!

1848.png

useRef()

本质上,useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”,它可以很方便地保存任何可变值

const refContainer = useRef(initialValue);

useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue

  • ref.current 值的改变,是无法通过 useEffect()来监控到的,可以使用 useCallback()