reactjs - react 钩子(Hook) : setState functionality on re-renders

Question

这是一个关于使用钩子(Hook)时可能会影响性能的问题。
报价 useState来自 react 文档的示例:

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 guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.

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

identity is stable and won’t change on re-renders 是什么意思意思是 ？

我可以看到每个按钮都有一个 anonymous函数作为事件处理程序传递。即使setState identity is stable正如 React 所声称的那样，匿名函数不会在每次重新渲染时重新创建吗？

如果 useCallback 会更有效吗？用于定义内存函数并将它们用作事件处理程序？

Answer 1

What does identity is stable and won’t change on re-renders mean ?

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

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

I can see that for each button an anonymous function is passed as event handler. Even if setState identity is stable as claimed by React is true, wouldn't the anonymous function be re-created at every re-render ?

是的，箭头函数确实会在重新渲染时重建。另一种方法是使用 useCallback记住一个回调，但代价是什么？调用 useCallback 的成本，内存该回调的成本，构建对它的引用的成本以及在每次重新渲染时检索该回调的成本大大超过了在每次重新渲染时简单地构建一个函数的好处。
useCallback函数本身是 20 lines long以及对其他内部 React API 的 3 个其他嵌套函数调用。所有这一切都是为了防止在每次渲染上制作单行功能？数学加起来根本不支持 useCallback .唯一有用的场景是，当您希望回调通过引用或其他某种机制具有“稳定标识”时，您可以将回调作为 Prop 传递而不会导致过多的重新渲染。