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不是函数（似乎该函数未在执行）。

如果我使用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);

参考文献：

Answer 2

这甚至不是关于react的问题，那是简单的js基础。我要解释另一个主题，事件函数调用

document.addEventListener('change',(createHiveBackground));
document.addEventListener('change', (event)=>createHiveBackground(anotherParam));

以上两个动作的作用相同，但是唯一的不同是，您在函数的第一行中对createHiveBackground进行编码的方式是，它拥有输入参数，就像看起来的那样 function createHiveBackground(event, anotherArg){}是因为父函数 addEventListener 在两种情况下都将 event 作为参数传递给提到的功能。

但是在第二种情况下，您对仅期望oneArgument的函数进行了编码function createHiveBackground(anotherArg){}，并且避免了 addEventListener 和 createHiveBackground < / em> ，因此您可以在中间使用功能

您关于它的区别的另一句话：

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

您的 createHiveBackground 是这样写的：

function createHiveBackground() {return data}

提供 React.useState 等待的数据。这将立即执行您的func。但这不适用于

document.addEventListener('change', createHiveBackground())

因为没有事件触发时，它将直接在“编译”中执行。一个异常可能会返回另一个函数，该事件将在事件触发时被调用。

function createHiveBackground(){ return function(event, anotherParam){doSomeStuff on event}

最后一个示例只是传递了一个函数体，以后可能会调用它 ()=>createHiveBackground 不会立即调用

回到您的问题，因此React.useState需要一些数据-您可以根据 createHiveBackground 函数实现使用其中的任何数据（上述同事说：

//first two similar and used at lazy call const [hive, setHive] = React.useState(createHiveBackground); const [hive, setHive] = React.useState(()=>createHiveBackground()); //the next must return a data to be passed to the state const [hive, setHive] = React.useState(createHiveBackground()); //nothing will happened because the function body will be passed but not executed //function's body will be stored at the state const [hive, setHive] = React.useState(()=>createHiveBackground);

useState（function_name），useState（function_name（）），useState（（）=> function_name（））和useState（（）=> function_name）之间有什么区别？

2 个答案: