在 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() 如果应用程序正在重新渲染，则此代码将调用 foo 。

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

Answer 1

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

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