react组件异步更新中的count更新问题
问题描述：
在react代码中，使用usestate钩子创建的count状态无法在异步回调函数中获得更新后的值。尽管setcount更新了状态，但异步任务完成后，控制台仍然打印旧值。
代码示例：
import { usestate } from 'react';
export default function app() {
const [count, setcount] = usestate(0);
const handleclick = () => {
setcount(count + 1);
settimeout(() => {
console.log(count, 'end'); // 仍为 0
}, 5000);
};
return (
<>
{count}
);
}原因分析：
react的更新机制：
react使用异步更新机制来优化渲染性能。当状态更新时，它不会立即同步更新dom。相反，它先将更新存储在队列中，然后在下一次绘制循环中批量更新dom。
异步回调函数：
settimeout是异步回调函数，它在指定时间后执行。当我们在回调函数中访问count时，它仍然引用更新前的值，因为react尚未完成更新dom。
对比普通javascript函数：
在普通javascript函数中，变量是按引用传递的。因此，在更新变量后，后续对该变量的访问将引用更新后的值。
解决方法：
为了在异步回调函数中获取更新后的count值，可以使用react提供的useeffect钩子：
useEffect(() => {
console.log(count, 'end'); // 现在为 1
}, [count]);在useeffect的回调函数中，count值会作为依赖项。当count改变时，react将在下一次绘制循环中调用回调函数，此时它将引用更新后的count值。
