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

Question

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

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

逻辑上看:

1. 初始渲染 = 我们用参数调用 useState
2. rerender = 我们再次使用参数调用 useState

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

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

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

Answer 1

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

就下面的说法而言

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

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

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

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

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