reactjs - 在 React 中，为什么 useState(foo()) 在每次重新渲染时调用 foo

Question

在 React 中，我知道下一个代码在 mount 中调用 foo 一次

(...)
function foo() {
 return {
      id: 1,
      text: 'hello',
    }
}

const App = () => {
  const [value, setter] = useState(foo);
(...)

但是如果我将 foo(useState 的参数) 更改为 foo() 如果 App 正在重新渲染，则此代码调用 foo。

我知道 foo 和 foo() 之间的区别，但我知道为什么会出现这种区别

Answer 1

代码first(second())表示调用second，并将其结果传递给first。因此，每次运行这样的一行时，都会调用 second。交换代码中的名称，我们得到 useState(foo())，它的行为相同。每次运行此行时，都会调用 foo。

至于为什么其他版本只调用一次，那是因为 useState 钩子(Hook)被设计成如果它接收到一个函数，它只会在第一次渲染时调用该函数。在随后的渲染中，您仍将传入该函数，但 react 发现这不是第一次渲染，因此它不会调用您的函数。