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

Question

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

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

export { getAllEmployees }

现在我使用 React.useState(getAllEmployees)。这给了我结果，当我像 React.useState(getAllEmployees()) 这样调用时，它也给了我相同的结果，像 [=34= 这样调用时的事件](() => 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]

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

Answer 1

Why they gives me same results?

const [result] = useState(getAllEmployees)

React useState hook 可以采用惰性初始化函数，在组件挂载和状态初始化时调用。您正在为 React 传递回调以使用 return 值调用和初始化状态。
const [result] = useState(getAllEmployees())

这只是立即调用函数并将return值传递给钩子作为初始状态。
const [result] = useState(() => getAllEmployees())

这与 1 相同，但是您传递了一个匿名初始化函数。

Which is the right way?

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

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

React does useState by default call function without parenthesis

javascript

function

reactjs

react-hooks

use-state