React Hooks，重新渲染并保持相同的状态-它如何在后台运行？

Question

重新渲染后的后续功能如何保持当前值？

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

逻辑上看起来：

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

将组件视为干净函数，这应该可以工作。 但是据我了解，useState可以将纯组件更改为不纯组件。

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

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

Answer 1

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

就以下陈述而言

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

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

但是，useState钩子中的setter确实也指定了将当前值传递给的回调方法。例如

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

此处savedCount从setCount传递到回调方法，并在内部进行响应以保持挂钩的当前状态。