React Hooks，重新渲染并保持相同的状态 - 它是如何工作的？

Question

重新渲染后的后续函数怎么可能保持当前值？

const Example = () => {
  const [count, setCount] = useState(0);
  return <button onClick={()=>setCount(count+1)} >{count}</button>
}

逻辑上看：

将组件视为一个干净的函数，这应该可行。但是据我了解，useState把纯组件变成了非纯组件。

但这仍然没有解释在没有自己的上下文的箭头函数中实现这种机制。如果 useState 没有挂接到父函数（如唯一 ID、this、回调等），则 useState 不应该知道它被调用的连续时间

React Hooks 看起来打破了许多函数式编程的范式...

Answer 1

在内部 useState 使用变量跟踪挂钩是否是第一次启动。如果它是对 useState 的第一次调用，它会使用传递的参数，否则它会维护自己的 dispatchQueue 用于更新。

就下面的说法而言

<button onClick={()=>setCount(count+1)} >{count}</button>

这里不是 setCount 保留变量，而是箭头函数从封闭范围继承 count 变量。

但是，来自 useState 挂钩的 setter 也指定了一个回调方法，它将当前值传递给该回调方法。例如

<button onClick={()=>setCount(savedCount => savedCount+1)} >{count}</button>

这里 savedCount 从 setCount 传递到回调方法，并且 React 在内部维护钩子的当前状态。

React Hooks, rerender & keeping same state - how it works underhood?