代码之家 › 专栏 › 技术社区 › Daniel

钩子中的状态跟踪和道具-React如何保持(跟踪)钩子中的状态和道具?

react-props closures react-hooks reactjs javascript

Daniel · 技术社区 · 3 年前

我知道在React类中,组件React使用“this”绑定来“跟踪”道具和状态。我怀疑,在钩子中,它是由于闭合而实现的?

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

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

这段代码的工作原理与您期望的计数器相同,如果您使用类组件,则必须在回调模式下使用setState()来访问以前的状态, 但是在钩子里,魔术是怎么发生的呢?

钩子上有没有捆绑?

1 回复 | 直到 3 年前

CertainPerformance 3 年前

React通过内部计数次数来跟踪状态 useState 第一次安装组件时称为。传递到的值 使用状态 然后设置为React的内部状态。例如,给定

const Component = () => {
  const [state1, setState1] = useState('one');
  const [state2, setState2] = useState('two');
  return 'foo';
};

然后,React将在内部存储以下状态:

['one', 'two']

在(隐藏的、内部的)状态数组中为 使用状态 确实如此。

当调用状态设置器时,内部状态数组中的相应项将被更新,然后组件将重新呈现。当组件重新渲染时,每个 使用状态 然后调用返回内部状态数组中的相应项。第一个 使用状态 调用将返回内部状态数组中的第一项,第二项 使用状态 call将返回第二项,依此类推。