首先,const [count,setCount] = useState(0) 这种语法是ES6的解构赋值语法。
数组在解构赋值时,按照返回的顺序一一解构,并且可以重新命名:
const foo = [1,2,3] const [a,b,c] = foo //a=1,b=2,c=3
而对象在解构赋值时,必须和useState函数内部返回的对象的key同名:
const food = { drink:'coffee', snack:'chips' }; const {drink,snack} = food;
这样的话,如果想再次使用这个函数,必须要重命名:
const {drink: drink1, snack: snack1} = food
因此数组形式相对来讲更方便。 但是返回数组也存在一些问题,比如必须要按照顺序解构,比如我只想用第二个返回值,那么就需要const [,setState] = useState()这样的方式来写了。
返回数组是非常棒的,但可以肯定的是,这取决于你的情况,让我们假设如果我们有一个返回10个属性的函数,但我们并不总是使用所有的属性,
在某些情况下,我们只使用第8个元素,在这种情况下维护代码也会非常困难,所以返回数组并不总是一个正确的决定。
建议:如果参数大于2个,可以返回object,否则就返回数组。
我们都知道,像useState、useEffect或useRef这样的react钩子只能在组件的顶层使用,不能在函数中使用,自定义钩子是我们可以在其中使用React钩子的函数。
自定义钩子对于在一个简单的函数中提取组件的逻辑是非常好的,它也使得我们的逻辑可以在任何其他的输入中重复使用。
返回数组使我们更容易、更干净地解构数值,我们只给返回的数组元素命名。
解构不仅可以用于数组,还可以用于对象,对象的解构与数组有一个重要的不同。
数组的元素是按次序排列的,变量的取值由它的位置决定。而对象的属性没有次序;
数组解构时的变量可以是任意名称,不会影响它的取值,而对象解构的变量必须与属性同名,才能取到正确的值。
const [state, setState] = useState(null); const [state2, setState2] = useState(null);
试想一下,如果useState返回的是对象,代码会变成这样:
const {state, setState} = useState(null); const {state:state2, setState:setState2} = useState(null);
很明显,如果代码块中多次使用useState,对象得重命名才能获取返回值,相比之下数组显得代码更加简洁。
但是数组也有它的不足之处:
返回值必须按顺序取。
返回的参数较多,又不是所有的返回值都需要的情况下,写法会比较奇怪。如只使用setState时const [, setState] = useState(null)。
所以在写自定义Hook时,返回值如果很多的情况下,觉得使用对象会更合理一些
标签:返回,const,解构,useState,数组,setState From: https://www.cnblogs.com/longmo666/p/17998600