IT技术 - React Hooks，重新渲染并保持相同的状态——它是如何工作的？ - 吾爱随笔录

IT技术 javascript reactjs redux react-hooks

2021-05-05 18:27:59

重新渲染后的以下函数如何保持当前值？

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

从逻辑上看：

将组件视为一个干净的功能，这应该可以工作。但据我所知， useState 将纯组件更改为不纯组件。

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

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

1个回答

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

就以下声明而言

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

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

然而，useState钩子中的 setter也指定了一个回调方法，它将当前值传递给它。例如

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

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

其它你可能感兴趣的问题