React Hooks：重新渲染时的 setState 功能

Question

这是一个关于使用钩子时可能会影响性能的问题。引用useStatereact 文档中的示例：

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}

React 保证 setState 函数标识是稳定的，并且不会在重新渲染时发生变化。这就是为什么从 useEffect 或 useCallback 依赖项列表中省略是安全的。

我有两个关于使用的疑问useState：

• 什么identity is stable and won’t change on re-renders意思？
• 我可以看到每个按钮都有一个anonymous函数作为事件处理程序传递。即使如setState identity is stableReact 所声称的那样，匿名函数不会在每次重新渲染时重新创建吗？

如果useCallback用于定义记忆化函数并将它们用作事件处理程序，不是更有效吗？

Answer 1

身份稳定且在重新渲染时不会改变是什么意思？

返回的函数useState在渲染周期中不会改变。也就是说，在第 10 个渲染周期设置状态之后，仍然可以调用在第一个渲染周期返回的调度函数。这允许您在任何时候使用 dispatch 函数设置钩子，而无需在函数引用更改时刷新钩子。

  useEffect(() => {
    setCount(initialCount);
  }, [ initialCount, setCount ]); // <--- setCount is not needed here

我可以看到每个按钮都有一个匿名函数作为事件处理程序传递。即使 React 声称的 setState 身份是稳定的，难道不会在每次重新渲染时重新创建匿名函数吗？

是的，箭头函数将在重新渲染时重建。另一种方法是使用useCallback记忆回调，但代价是什么？调用useCallback的成本、记住回调的成本、构建对它的引用的成本以及在每次重新渲染时检索回调的成本都大大超过了在每次重新渲染时简单地构建函数的好处。

该useCallback函数本身有20 行长，还有 3 个对其他内部 React API 的嵌套函数调用。所有这些都是为了防止在每次渲染时制作单行功能？数学加起来并不支持useCallback。唯一有用的场景是当您希望您的回调通过引用或其他某种机制具有“稳定身份”时，以便您可以将回调作为道具传递而不会导致过多的重新渲染。