React Hooks如何追踪state与props？其实现机制是什么？

1. Hooks的状态/props追踪是不是靠闭包实现？ #

闭包是组件逻辑能访问到状态、props的直接原因，但不是React存储状态的核心机制：

• 类组件的所有状态、props都挂在组件实例this上，组件整个生命周期里this指向同一个可变对象，所以任何位置访问this.state/this.props拿到的都是当时最新的值，不存在状态快照的概念。
• Hooks的状态并不存储在组件函数的闭包里，而是存在React内部为每个组件维护的专属存储结构上。每次组件重渲染，React会严格按照Hooks的调用顺序，把对应位置的最新状态值取出来，传入当前这一次组件函数的执行作用域。
• 组件内定义的事件回调、useEffect逻辑，会通过JS原生的闭包特性，把当前这一次render作用域里的state、props值“捕获”下来，这就是你能在回调里拿到状态的直接原因。

2. 为什么示例中直接写setCount(count + 1)就能正常计数，类组件却常需要回调形式的setState？ #

首先要纠正一个常见误区：根本不存在“类组件必须用回调setState、Hooks不用”的规则，你贴的代码能正常跑，只是场景刚好没触发状态过期的问题：

• 示例里每次点击只会触发一次setCount，点击时运行的onClick回调是上一轮render生成的，闭包捕获的count刚好是点击当下的最新状态，算出来的count + 1自然是对的。
• 要是你在同一次点击里连续调两次setCount(count + 1)，就会发现点一次只加1：因为两次调用用到的count都是同一个闭包里捕获的旧值，比如当前count是0，两次执行都是setCount(0 + 1)，最后结果只会是1，和类组件非回调形式setState连续调用的表现一模一样。
• 不管是类组件还是Hooks，只要新状态的计算依赖前序状态，最稳妥的写法都是函数式更新：

  // 连续调用也能正确加2，不会出问题
  setCount(prevCount => prevCount + 1)
  setCount(prevCount => prevCount + 1)
  

  这种写法下React会把上一次更新计算完成的最新状态传给回调，完全不依赖闭包捕获的快照值，不会出现状态拿错的问题。

你问题中提到的示例代码如下，和上面的逻辑完全对应：

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

3. Hooks有没有类似类组件的绑定机制？ #

没有。
Hooks没有类组件里this这种统一的、可变的实例绑定对象，它能匹配到对应状态，完全靠固定的调用顺序：每一轮render里，Hooks的调用顺序、调用数量必须完全一致，React才能按顺序从内部存储里找到对应的状态值——这也是为什么Hooks不能写在if判断、for循环这类条件/分支逻辑里的核心原因。
和类组件通过可变this随时能拿到最新状态的逻辑不同，每一轮render拿到的state、props都是这一轮专属的不可变快照，闭包捕获的值不会跟着后续重渲染变化，这就是大家常说的Hooks闭包陷阱的来源：如果异步回调的执行时机晚于当前render的周期，回调里拿到的就会是触发异步时的旧状态。要解决这个问题要么用前面说的函数式更新，要么用useRef存一份可变的最新值。

内容的提问来源于stack exchange，提问作者user19404608