React 默认调用不带括号的函数 useState

Posted 2023-02-14

【中文标题】React 默认调用不带括号的函数 useState

【英文标题】：React does useState by default call function without parenthesis

【发布时间】：2021-05-20 03:14:27

【问题描述】：

我有一个名为 getAllEmployees 的函数，我从另一个文件中导出它。

const getAllEmployees = () => 
    return [1,2,3,4,5,6,7,8,9]


export  getAllEmployees 

现在我使用 React.useState(getAllEmployees)。这给了我结果，当我像 React.useState(getAllEmployees()) 一样调用时，它也给了我相同的结果，当调用像 React.useState(() => getAllEmployees() ) 这也给了我同样的结果。

在这里导入

import  getAllEmployees  from './Service/Service'

与 useState 一起使用

const [result] = useState(getAllEmployees ) or
const [result] = useState(getAllEmployees()) or
const [result] = useState(() => getAllEmployees())

console.log(result)

所有这些结果都是

 (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]

我的问题是为什么他们给我相同的结果，哪个是正确的方法？

【问题讨论】：

const [result, setResult] = useState(getAllEmployees);

这里我没有兴趣再次设置结果。为此，只需从函数中获取值，这就是我只使用 [result] 的原因

【参考方案1】：

为什么他们给我同样的结果？

const [result] = useState(getAllEmployees)

React useState 钩子可以采用惰性初始化函数，在组件挂载和状态初始化时调用。您正在传递一个回调，以便 React 调用并使用返回值初始化状态。

const [result] = useState(getAllEmployees())

这只是立即调用函数并将返回值传递给钩子作为初始状态。

const [result] = useState(() => getAllEmployees())

这和 1 一样，但是你传递了一个匿名初始化函数。

正确的方法是什么？

正确的方法是适合您的用例，易于阅读、理解和维护。 1 或 2 都可以，如果很明显 getAllEmployees 是一个函数，则为 1，如果不是，则为 2。 3 是不必要的。