react中的useState修改状态获取最新状态值

点击查看代码

对于为什么要传入一个函数来更新状态，是为了确保在更新状态之前，使用最新的状态值进行计算。

让我解释一下。在React中，当我们调用setXXX钩子来更新状态时，React并不会立即更新状态值。相反，它将更新请求加入到一个队列中，并在稍后的时间点批量处理这些更新请求。这样做是为了优化性能，避免频繁更新导致的性能问题。

考虑以下代码示例：
const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // 输出的还是旧的 count 值
}
在这个例子中，我们通过点击事件来更新count状态。如果我们直接传入一个新的值来更新状态，比如setCount(count + 1)，此时的count还是旧的值，因为状态更新是异步的，还没有被React更新。

为了解决这个问题，React允许我们传入一个函数来更新状态，这个函数接收上一个状态值作为参数，并返回一个新的状态值。通过这种方式，我们可以确保在更新状态之前使用最新的状态值进行计算，避免出现不可预料的结果。

修正后的代码示例：

jsx
const [count, setCount] = useState(0);

function handleClick() {
  setCount(prevCount => prevCount + 1);
  console.log(count); // 输出的是最新的 count 值
}
现在，setCount接收一个函数作为参数，并传入了prevCount，它是最新的状态值。
在这个函数内部，我们可以使用prevCount进行计算，并返回一个新的状态值。
这样可以确保我们在更新状态之前使用了最新的值。