react 定时器内闭包的存在导致数据无法及时更新

需求：React Hooks useEffect使用定时器，每3秒更新一次值

代码如下：

 const [MyV, setMyV] = useState(0);useEffect(() => {// 每隔3s,增加1const interval = setInterval(() => {setMyV(MyV+1);}, 3 * 1000);return () => {clearInterval(interval);};}, []);

实际，页面展示MyV 一直是 1。因为setInterval会行程一个闭包。此闭包内用到的的上下文的state都是创建时的初始值。因此 setMyV(MyV+1); 时，MyV一直都是 0

优化方法1 ：setMyV的函数形式

适用于此案例，只涉及一个state的变更

原理分析： setMyV((v) => v + 1); 里的v不属于闭包内部的变量，而是一个形参，因此不会一直使用0+1，而是最新的数据+1

  const interval = setInterval(() => {setMyV((v) => v + 1);}, 3 * 1000);

优化方法2 ：使用ref

适用于复杂案例，或许会涉及多个state的变更、甚至更多代码、方法、state的关联调用

原理分析：useRef 返回一个具有单个 current 属性的 ref 对象，并初始化为你提供的初始值。
且在后续useRef 将返回相同的对象。
因此，在此setInterval的闭包里，它只会关注myRef这个ref对象指向的地址，不再变化即可。myRef内部的current属性千变万化，以及myRef.current内部的其他属性用到的其它state (此处指MyV)也都是最新的。

  const [MyV, setMyV] = useState(0);const myRef: any = useRef();myRef.current = () => {setMyV(MyV + 1);//只要是在这里访问、处理的，永远是最新的数据//...};useEffect(() => {// 每隔3s,增加1const interval = setInterval(() => {myRef.current();}, 3 * 1000);return () => {clearInterval(interval);};}, []);