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

【问题标题】：Why doesn't useState function initialize state every time?为什么 useState 函数不是每次都初始化状态？
【发布时间】：2019-11-07 18:23:55
【问题描述】：

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 函数中，有什么逻辑吗？

【问题讨论】：

钩子不是普通的函数，它们很神奇。 useState 将值在内部存储在 react 的核心中，并在再次执行渲染函数时将更新的而不是初始的值传递回您的组件
初始化只完成一次。它在每次渲染上运行，但结果被忽略。您还可以传递一个函数来初始化状态，这个函数只运行一次。 const[s,setter] = useState(() => 3)。 reactjs.org/docs/hooks-reference.html#lazy-initial-state
函数外？我没有看到在另一个组件中使用 count 。除非您通过它们，否则它仅在该组件中可用。
@AndyRay 并不神奇，但它们绝对不是纯粹的。该实现依赖于组件内钩子调用的相对顺序，以便在传递之间传播状态。
@AndyRay 你当然可以嵌套它们......否则自定义钩子是不可能的。重要的是组件内对 React 提供的钩子的调用的相对顺序对于所有渲染保持相同。这是一个非常简化的pseudo-implementation 钩子如何在幕后工作。

标签： javascript reactjs react-hooks

【解决方案1】：

useState 作为一个函数将你给它的值存储在 React 的核心中。当组件重新渲染时，React 会将更新后的计数从其核心传递给组件。

更多信息here。

【讨论】：

【解决方案2】：

状态仅在您创建组件时初始化一次，这就是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。

【讨论】：

【解决方案3】：

根据React官网：

React 跟踪当前呈现的组件。感谢Roles of Hooks，我们知道 Hooks 只能从 React 组件调用（或自定义 Hooks — 也只能从 React 组件调用）。

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

参考：

How does React associate Hook calls with components?

【讨论】：

【解决方案4】：

为什么useState函数不是每次都初始化State？

我认为您对以下内容感到困惑：

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

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

是的，它只是一个变量，但每次从 useState 挂钩运行函数时都会用到它。它是您在基于类的组件中看到的本地状态。

【讨论】：