场景 :

  1.  在一个函数内,调用了setState后立马取值
  2.  在一个函数内,调用了setState后,又调用了很多层函数,其中某一个函数需要用到最新的state值
  3.  在一个函数内,有5个请求,这五个请求都需要调用setState,并组合成新的值

产生原因:

基于React的快照模式,每一次setState都会生成新的快照,但旧的快照,只能取到旧值

解决方案:

场景1:

通过变量存储新值直接使用,不使用state的值

场景2:

通过层层传递值的行为来搞

场景3:

通过setState(state => { …state, [key]: any })这种形式来搞

通用解决方案:

1. ahooks的useReactive,可以完美解决此问题(底层用了Proxy,与Vue3同样问题,不支持IE)

2. 复用uesRef缓存值方案,也可以解决上述问题(写得麻烦,但至少没兼容性问题,根据自己需求进行选择)

function Index() {
  const [state, setState] = useState({ a: 1, b: 2 })
  const stateRef = useRef(state)
  stateRef.current.state = state
  /** 需要使用到state值的时候,统一从stateRef.current进行取 **/
}