javascript - useState(function_name)、useState(function_name())、useState(()=>function_name()) 和 useState(()=>function_name) 之间有什么区别？

Question

createHiveBackground 函数返回我要分配给状态的对象数组。稍后在我的应用程序中，我将使用 setHive 来更改数组的一些值。这些有什么区别？

const [hive, setHive] = React.useState(createHiveBackground);
const [hive, setHive] = React.useState(createHiveBackground());
const [hive, setHive] = React.useState(()=>createHiveBackground);
const [hive, setHive] = React.useState(()=>createHiveBackground());

如果我使用 useState(createHiveBackground) 它似乎工作正常。

如果每次使用 setHive 更改值时都使用 useState(createHiveBackground())，则会再次调用该函数。

如果我使用 useState(()=>createHiveBackground) TypeError: hive.map is not a function (seems like the function is not being executed).

如果我使用 React.useState(()=>createHiveBackground()); 它似乎工作正常。

有人可以阐明所有这些选项之间的区别是什么以及最适合我的情况吗？

Answer 1

区别在于:

• 值类型:函数/数组(函数的返回类型)。
• 初始类型:普通/惰性

// Lazy assign the return value of the function
// Both are equivalent as First-class functions (check the reference)
const [hive, setHive] = React.useState(createHiveBackground);
const [hive, setHive] = React.useState(() => createHiveBackground());

// Assign the return value from the function
const [hive, setHive] = React.useState(createHiveBackground());

// Lazy assign the function
const [hive, setHive] = React.useState(() => createHiveBackground);

引用资料:

• useState Hook
• Lazy initial state
• First Class Function