javascript - 功能组件的哪些部分在重新渲染时运行？

Question

我习惯于在 React 中对组件进行分类，但我正在尝试学习 React 钩子(Hook)。我知道在类组件中，有 render()方法。每当重新渲染类组件时，都会调用此方法。但是，对于具有状态的功能组件( react Hook )，没有这样的 render()方法。整个函数是否在每次重新渲染时运行？如果是这样，如果函数的每一行代码都运行，状态是否会重置回默认状态值？这是一个示例片段——例如，如果这个组件在我调用 setAnimal 时被重新渲染，那么重新渲染不会使动物重置回“狗”吗？

const SearchParams = () => {
  const [location, setLocation] = useState("Seattle, WA");
  const [animal, setAnimal] = useState("dog");

  return (
    <div className="search-params">
      <form>
        <label htmlFor="location">
          Location
          <input
            id="location"
            value={location}
            placeholder="Location"
            onChange={(e) => setLocation(e.target.value)}
          />
        </label>
        <label htmlFor="animal">
          Animal
          <select
            id="animal"
            value={animal}
            onChange={(e) => setAnimal(e.target.value)}
            onBlur={(e) => setAnimal(e.target.value)}
          >
            <option>All</option>
            {ANIMALS.map((animal) => (
              <option value={animal}>{animal}</option>
            ))}
          </select>
        </label>
        <button>Submit</button>
      </form>
    </div>
  );
};

Answer 1

重新运行整个函数。但是，useState() 存储状态并且不会被覆盖。当您执行 useState("SOMETHING") 时，您传递的值是初始默认值，并且只设置一次(也就是在它的第一次初始化时)。
React 会在重新渲染之间记住它的当前值，并为我们的函数提供最新的值。 - 直接来自 reactjs.org/docs/hooks-state.html
根据你的要求，我希望这能回答它!