name: 功能性setState更新 description: 使用功能性setState更新来防止陈旧闭包和不必要的回调重新创建。在基于当前状态值更新状态时应用。

使用功能性setState更新

当基于当前状态值更新状态时，使用setState的函数式更新形式，而不是直接引用状态变量。这可以防止陈旧闭包，消除不必要的依赖，并创建稳定的回调引用。

错误（需要状态作为依赖项）：

function TodoList() {
  const [items, setItems] = useState(initialItems)

  // 回调必须依赖items，每次items改变时重新创建
  const addItems = useCallback((newItems: Item[]) => {
    setItems([...items, ...newItems])
  }, [items])  // items依赖导致重新创建

  // 如果忘记依赖，存在陈旧闭包风险
  const removeItem = useCallback((id: string) => {
    setItems(items.filter(item => item.id !== id))
  }, [])  // 缺少items依赖 - 将使用陈旧的items!

  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
}

第一个回调每次items改变时都会重新创建，可能导致子组件不必要地重新渲染。第二个回调有陈旧闭包错误——它总是引用初始的items值。

正确（稳定的回调，无陈旧闭包）：

function TodoList() {
  const [items, setItems] = useState(initialItems)

  // 稳定的回调，从不重新创建
  const addItems = useCallback((newItems: Item[]) => {
    setItems(curr => [...curr, ...newItems])
  }, [])  // 无需依赖

  // 总是使用最新状态，无陈旧闭包风险
  const removeItem = useCallback((id: string) => {
    setItems(curr => curr.filter(item => item.id !== id))
  }, [])  // 安全且稳定

  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
}

好处：

稳定的回调引用 - 回调在状态改变时无需重新创建
无陈旧闭包 - 总是操作最新的状态值
更少的依赖项 - 简化依赖数组并减少内存泄漏
防止错误 - 消除最常见的React闭包错误源

何时使用功能更新：

任何依赖于当前状态值的setState
在useCallback/useMemo中需要状态时
引用状态的事件处理程序
更新状态的异步操作

何时直接更新是可接受的：

将状态设置为静态值：setCount(0)
仅从props/参数设置状态：setName(newName)
状态不依赖于先前的值

注意： 如果你的项目启用了React Compiler，编译器可以自动优化一些情况，但功能更新仍然推荐用于正确性和防止陈旧闭包错误。