在使用react hook时候的一些问题记录
实际使用react hook的时候遇到的一些问题记录下来了，温故而知新。
问题1：useState已经重新赋值了，但是拿到的还是之前的值
例子1：界面上有个按钮，点击按钮界面上数值会增加1和2
const Test = () => {const [arr, setArr] = useState([0]);const handleClick = () => {Promise.resolve().then(() => {setArr([...arr, 1)];}.then(() => {setArr([...arr, 2)];}}return (<div>{arr.toString()}<button onClick={handleClick}>按钮</button></div>)
}
但是实际的结果是：
点击按钮，界面展示的是 0,2。跟预期需要展示的0，1，2不一样
例子2：点击按钮，执行三次setState，希望加3
const [count, setCount] = useState(0);function handleClick() {setCount(count + 1);setCount(count + 1);setCount(count + 1);
}
但是实际的结果是：
点击按钮，界面展示的是1。跟预期需要展示的3不一样
原因
组件内部的任何函数，包括事件处理函数和Effect，都是从它被创建的那次渲染中被看到的，所以引用的值都是旧的（没找到原文出处，所以对“看到”这个词表示疑惑），理解为：因为界面没有重新渲染，执行的函数作用域还是旧的，所以里面值的引用还是之前的，所以即使多次执行，拿到的都是旧值，会导致界面展示出现异常。
直接在handleClick里面打印count，展示的还是上一次的值，不是最新的值，这个由react的调度机制决定的。
修改建议：利用state hook参数可以是回调函数进行解决;或者可以用ref，但是ref记录值不太灵活，所以还是建议回调函数
setArr([...arr, 2)]; --------------变更成-------------setArr((arr) => {return [...arr, 2];}
