javascript - React 的 useEffect 钩子(Hook)如何访问其下定义的所有函数表达式？

Question

我在 React 中创建了一个功能组件，如下所示:

import React, {useEffect} from "react";
import "./styles.css";

export default function App() {

  useEffect(() => logSomething(), [])

  const logSomething = () => console.log('whats up');
  return (<div> hello </div>)
}

此函数运行时没有任何错误，并在控制台中成功注销“whats up”。

然而，当我尝试以下操作时，我得到一个 TypeError:

export default function App() {

  useEffect(logSomething(), [])

  const logSomething = () => () => console.log('whats up');
  return (<div> hello </div>)
}

类似地，当我尝试这个时我得到一个 TypeError:

export default function App() {

  useEffect(logSomething, [])

  const logSomething = () => console.log('whats up');
  return (<div> hello </div>)
}

为什么第一个例子成功了，第二个和第三个例子却失败了？第一个函数表达式是否以某种方式被提升？如果是这样，为什么不提升其他 2 个函数表达式？或者这只是 JavaScript 中函数引用工作方式的一些怪癖？

Answer 1

在您的第二个和第三个示例中，您试图在定义 logSomething 之前使用它。这会导致类型错误。

第一个示例有效，因为传递给 useEffect 的匿名函数不会立即被调用，所以 logSomething 还没有定义也没关系。在调用该函数时，const logSomething 已定义并在范围内。