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

Question

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

\n

\r\n

\r\n

const SearchParams = () => {\n  const [location, setLocation] = useState("Seattle, WA");\n  const [animal, setAnimal] = useState("dog");\n\n  return (\n    <div className="search-params">\n      <form>\n        <label htmlFor="location">\n          Location\n          <input\n            id="location"\n            value={location}\n            placeholder="Location"\n            onChange={(e) => setLocation(e.target.value)}\n          />\n        </label>\n        <label htmlFor="animal">\n          Animal\n          <select\n            id="animal"\n            value={animal}\n            onChange={(e) => setAnimal(e.target.value)}\n            onBlur={(e) => setAnimal(e.target.value)}\n          >\n            <option>All</option>\n            {ANIMALS.map((animal) => (\n              <option value={animal}>{animal}</option>\n            ))}\n          </select>\n        </label>\n        <button>Submit</button>\n      </form>\n    </div>\n  );\n};

\r\n

\r\n

\r\n

\n

Answer 1

整个函数重新运行。但是，useState() 存储状态并且不会被覆盖。当您执行 useState("SOMETHING") 时，您传递的值是初始默认值，并且仅设置一次（也称为第一次初始化时）。

React 将记住重新渲染之间的当前值，并为我们的函数提供最新的值。- 直接从reactjs.org/docs/hooks-state.html中提取

根据您的问题，我希望这能回答您的问题！