函数组件更新状态回调函数

在 React 中，函数组件可以使用 `useState` 钩子来定义状态。当我们更新状态时，可以使用回调函数来处理状态更新后的副作用。

下面是一个例子：

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleButtonClick = () => {
    setCount(count + 1, () => {
      // 在状态更新后执行的回调函数
      console.log('count更新为', count);
    });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleButtonClick}>增加</button>
    </div>
  );
}

在这个例子中，我们通过 `useState` 钩子定义了一个状态 `count`，并使用 `setCount` 函数来更新它。`setCount` 函数接受两个参数：新的状态值和一个可选的回调函数。我们可以在回调函数中对状态更新后的结果进行处理。

在上面的例子中，我们使用了一个箭头函数来定义 `handleButtonClick`，它会在按钮被点击时被调用。在这个函数中，我们使用 `setCount` 函数来增加 `count` 的值，并在第二个参数中传入一个回调函数，用来在状态更新后输出 `count` 的值。

需要注意的是，由于 `setState` 函数是异步执行的，所以在回调函数中获取到的状态值可能不是最新的。如果需要在回调函数中使用最新的状态值，可以使用函数式更新的方式来更新状态，如下所示：

const handleButtonClick = () => {
  setCount(prevCount => prevCount + 1, () => {
    console.log('count更新为', count);
  });
};

在这个例子中，我们使用了函数式更新的方式来更新状态，`setCount` 函数的第一个参数是一个函数，接受当前状态值作为参数，并返回新的状态值。这样，我们就可以在回调函数中获取到最新的状态值了。