hook的闭包陷阱的成因和解决方案

成因

闭包陷阱就是effect函数等引用了state,形成了闭包,但是并没有把state写到依赖数组中,导致执行effect时用的state还是更新之前的。

解决方案

1、直接把state加到依赖数组中,这样state变化就会重新执行effect函数,引用新的state。但这样做有一个弊端就是在需要用到定时器的场景中需要保证计时器只跑一次,不然重新跑会导致定时不准。

2、使用useState的函数传入形式,从参数拿到上次的state,这样就不会形成闭包了,或者用useReducer,直接dispatch action,而不是直接操作state,这样页不会形成闭包。

3、使用useRef保存每次渲染的值,用到的时候从ref.current取