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

Question

在React中，我知道下面的代码仅在挂载时调用foo函数。

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

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

但如果我把 foo （useState 的参数）改成 foo()，这段代码会在 App 重新渲染时调用 foo。

我知道 foo 和 foo() 的区别，但不知道这种差异是如何发生的。

- made bird

Answer 1

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

至于为什么另一个版本只调用一次，那是因为useState钩子被设计为如果它接收到一个函数，它将仅在第一次渲染时调用该函数。在后续的渲染中，您仍将传递该函数，但react会看到这不是第一次渲染，因此不会调用您的函数。

- Nicholas Tower

Answer 2

在函数体中的函数调用必须由JS引擎评估，它不知道在后续渲染中React将忽略结果。

这就像控制流中的任何其他函数调用一样。在JS调用useState之前，它必须先进行评估。

如果您发送函数引用，则useState的实现仅知道在挂载时对其进行评估。

- windowsill