问题分析
比如我们把接口返回的数据,使用 useState
储存起来,但是当后面去改变这个数据的时候,每次拿到的都是上次的数据,无法实时更新。
useState() 是异步函数 ,我们 setState() 后不会立刻对值进行改变,而是会将其暂时放入 pending 队列中。react 会合并多个 state ,然后值 render 一次。
到底是异步还是同步,why有时候又觉得是同步的?
只要你进入了 react
的调度流程,那就是异步的。只要你没有进入 react
的调度流程,那就是同步的。什么东西不会进入 react
的调度流程? setTimeout
setInterval
,直接在 DOM
上绑定原生事件等。这些都不会走 React
的调度流程,你在这种情况下调用 setState
,那这次 setState
就是同步的。 否则就是异步的。
解决方案
使用 useRef() ,对于一些需要更新后立即获得新值的数据,我们可以选择用 ref
对象来存储!!
useRef()
本质上,
useRef
就像是可以在其.current
属性中保存一个可变值的“盒子”,它可以很方便地保存任何可变值。
const refContainer = useRef(initialValue);
useRef
返回一个可变的 ref 对象,其 .current
属性被初始化为传入的参数(initialValue
)
- ref.current 值的改变,是无法通过 useEffect()来监控到的,可以使用 useCallback()