Question

import React, { useState } from "react";

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count {count}</button>
    </div>
  );
}

export default HookCounter;

React每当需要重新渲染时都会调用此函数。

但是为什么每次都不初始化状态？

退出函数时，变量的寿命结束了，不是吗？

但是它如何继续保存状态值？

我不明白。

在useState函数中，是否有任何逻辑？

Answer 1

this.driver = await new webDriver.Builder().usingServer(process.env.SELENIUM_HUB_IP).withCapabilities(webDriver.Capabilities.chrome()).build();作为函数将您赋予它的值存储在React的核心内。重新渲染组件时，React会将更新后的计数从其核心传递到组件。

更多信息here。

Answer 2

为什么不使用State函数每次都初始化State？

我认为您很困惑：

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

因为它只是一个变量！？！

是的，它只是一个变量，但是每次函数从useState钩子运行时都需要花费时间。就像您在基于类的组件中看到的那样，它是本地状态。

Answer 3

创建组件时，状态仅初始化一次，这就是React的工作方式。从文档中：

调用useState有什么作用？它声明了一个“状态变量”。通常，变量在函数退出时“消失”，但状态变量由React保留。

仅在此处提供上下文，让我总结一下useState及其更详细的工作原理。

什么是useState：

因此useState是一个钩子，可以帮助您处理功能组件中的状态。

它如何工作？

一旦调用useState，就需要传递状态的初始值，该状态要在功能组件中使用。它返回一对值count和setCount。

因此，让我们在下面给出示例：

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

因此useState返回了两项，其中count是当前值。第二项setCount是一个函数，可用于更新count状态的值。

count可用于表示状态，例如div元素中的值：

return (
   <div>{count}</div>
)

要更新值，您可以调用setState(12)来实现。

您可以从文档中进一步阅读here。

Answer 4

根据React官方网站：

React跟踪当前渲染的组件。感谢Roles of Hooks，我们知道Hook只能从React组件（或自定义Hook －也只能从React组件调用）中调用。

内部有与每个组件关联的“内存单元” 的列表。它们只是JavaScript对象，我们可以在其中放置一些数据。当您调用useState()之类的Hook时，它将读取当前单元格（或在第一个渲染期间对其进行初始化），然后将指针移至下一个单元格。这就是多个useState()调用各自获得独立的本地状态的方式。

参考：

How does React associate Hook calls with components?

为什么useState函数不能每次都初始化状态？

4 个答案: