场景 :
- 在一个函数内,调用了setState后立马取值
- 在一个函数内,调用了setState后,又调用了很多层函数,其中某一个函数需要用到最新的state值
- 在一个函数内,有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进行取 **/
}