反应钩子是如何工作的？ 为什么 useState 跟踪的值不会在重新渲染时重置？

Question

我是 React 的新手，并试图将我的头放在钩子上，尤其是在函数组件中使用时。

下面是一个使用useState钩子的例子：

import React, { useState } from "react";

const StateTutorial = () => {
  const [inputValue, setInputValue] = useState("Pedro");

  let onChange = (event) => {
    const newValue = event.target.value;
    setInputValue(newValue);
  };

  return (
    <div>
      <input placeholder="enter something..." onChange={onChange} />
      {inputValue}
    </div>
  );
};

export default StateTutorial;

这是取自这里

我了解如何使用它。 我知道每次调用setInputValue ，状态都会更新，视图会重新渲染，我们会看到inputValue的新值。

我假设，重新渲染将涉及再次调用StateTutorial函数。

那么我的问题是，如果在重新渲染时调用StateTutorial ，那么inputValue值为什么没有重置为初始值？ 功能组件和反应钩子是如何工作的？ useState跟踪的状态怎么可能在重新渲染时没有重置为初始值，因为查看代码这是我所期望的。

Answer 1

为了保持简短：

您可能熟悉虚拟 DOM 的概念。 如果没有，那么想象一下 react 保留了实际浏览器 DOM 的表示，在内存中表示为 JavaScript 对象。 然后使用虚拟 DOM 进行多项优化。

在钩子的情况下，钩子的值被附加到组件的虚拟节点。 由于组件的实际虚拟节点对象在重新渲染StateTutorial保持StateTutorial ，因此也保留了实际的钩子值。

就我个人而言，我发现构建你自己的 React 教程是一种很好且非常易于理解的方式，可以更好地理解这些概念。