useState(function_name), useState(function_name()), useState(()=>function_name()) 和 useState(()=>function_name 有什么区别)?

Question

函数 createHiveBackground returns 我要分配给某个状态的对象数组。稍后在我的应用程序中，我将使用 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 being executed).

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

能否澄清所有这些选项之间的区别以及最适合我的情况？

Answer 1

区别在于：

值类型：Function/Array（函数的 return 类型）。
初始类型： Normal/Lazy

// 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

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

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

以上两个动作的行为相同，但唯一的区别是你在第一行中编码 createHiveBackground 你的函数处理它拥有传入的参数，因为它看起来像 function createHiveBackground(event, anotherArg){}因为父函数addEventListener传递了event 在任何一种情况下都作为参数作为上述函数的第一个参数。

但是在第二种情况下，您编写的函数仅需要一个参数 function createHiveBackground(anotherArg){}，并且避免了 addEventListener 和createHiveBackground所以你在中间使用函数

你的另一行与它的区别：

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

你的createHiveBackground是这样写的：

function createHiveBackground() {return data}

提供一个React.useState等待的数据。这会立即执行您的函数。但这不适用于

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

因为它会在 'compilation' 没有事件触发时立即执行。一个异常可能 return 另一个将在事件触发时调用的函数。

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 有什么区别)?

What's the difference between useState(function_name), useState(function_name()), useState(()=>function_name()) and useState(()=>function_name)?

javascript

reactjs