状态跟踪和钩子中的道具 - 钩子中的反应如何保持（跟踪）状态和道具？

发布于 2025-02-12 18:31:29 字数 483 浏览 4 评论 0原文

我知道在React类中，React使用“ Track”道具和状态的“此”绑定。在钩子中，这要归功于封闭，我的疑问是吗？

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（）访问先前的状态，，但在挂钩中，魔术是如何发生的？

<强>钩子上是否有任何绑定？

原文

I know that in React class components React uses the "this" binding to "track" props and state. In hooks it is achieved thanks to closures, is my doubt?

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

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

This code works as you would expect a counter, if you were using class component you would have to use setState() in callback mode to access the previous state, but in hooks how does the magic happen?

are there any bindings on the hooks or not?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野鹿林 2025-02-19 18:31:29

React通过内部计数次数USESTATE首次安装次数来跟踪状态。然后将传递到usestate的值设置为React的内部状态。例如，给定的

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

React将在内部存储以下状态：

['one', 'two']

对于usestate的每个呼叫的（隐藏，内部）状态数组中的一个项目。

当调用状态设置器时，内部状态数组中的相应项目将被更新，然后组件将重新渲染。当组件重新渲染时，每个usestate调用，然后在内部状态数组中返回适当的项目。第一个usestate调用将返回内部状态数组中的第一个项目，第二个usestate呼叫将返回第二项，依此类推。

在您的代码中，使用钩子，点击处理程序对count的值进行了关闭，该值在该特定的计数器上存在。

如果使用类组件，则必须在回调模式下使用setState（）访问先前的状态

- 如果此代码是类组件，则可以免费参考this.state.state.count.count直接不使用回调版。

React keeps track of state by internally counting the number of times useState is called the first time a component mounts. The value passed into useState is then set into React's internal state. For example, given

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

React will then have the following state stored internally:

['one', 'two']

with one item in the (hidden, internal) state array for each call of useState that there is.

When a state setter is called, the corresponding item in the internal state array will be updated, and then the component will re-render. When a component re-renders, each useState call then returns the appropriate item in the internal state array. The first useState call will return the first item in the internal state array, the second useState call will return the second item, and so on.

In your code, with hooks, the click handler has a closure over the value of count that existed at that particular render of Counter.