首页 > 其他分享 >useState返回的为什么是数组而不是对象?

useState返回的为什么是数组而不是对象?

时间:2024-01-31 09:55:25浏览次数:28  
标签:返回 const 解构 useState 数组 setState

首先,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

相关文章

  • 解决gpt返回json Python没法解析的情况
    importreimportjsondefreplace_newlines(match):#在匹配的字符串中替换\n和\rreturnmatch.group(0).replace('\n','\\n').replace('\r','\\r')defclean_json_str(json_str:str)->str:""&......
  • 数组中重复的数据
    给定一个整数数组a,其中1≤a[i]≤n(n为数组长度),其中有些元素出现两次而其他元素出现一次。找到所有出现两次的元素。你可以不用到任何额外空间并在O(n)时间复杂度内解决这个问题吗?示例:输入:[4,3,2,7,8,2,3,1]输出:[2,3]publicList<Integer>findDuplicates(int[]......
  • 找到所有数组中消失的数字
    448.FindAllNumbersDisappearedinanArray(Easy)给定一个范围在1≤a[i]≤n(n=数组大小)的整型数组,数组中的元素一些出现了两次,另一些只出现一次。找到所有在[1,n]范围之间没有出现在数组中的数字。您能在不使用额外空间且时间复杂度为O(n)的情况下完成......
  • JAVA基础-数组
    数组(array)是一种容器,用来存储同种数据类型的多个值。总结:数组容器在存储数据的时候,需要结合数据类型考虑。例如:int类型的数组容器(booleanbyteshortdouble)建议:容器的类型,和存储的数据类型保持一致数组的定义格式⚫格式一:数据类型[]变量名⚫范例:int[]array⚫格......
  • C语言之二维数组的奥妙
    二维数组是什么二维数组是一个数组,数组的元素是数组type arr[N]={arr[M]};上图等价于typearr[N][M]N行M列数组,N和M都为整形常量 二维数组的存储方法如图是一个两行两列的二维数组,比如inta[2][2],在内存中是如何存储的采用的是蛇形的方法 二维数组的使用1#i......
  • VBA字节数组
    1SubreadArrByte()2DimstrPathAsString,ArByte()AsByte3DimintFileLenAsInteger4'配置路径、字节数组5strPath=ActivePresentation.Path'6strPath=strPath&"\"&"ByteFile-副本.txt"......
  • 携程获取景点详情 API 返回值说明
    公共参数请求地址:前往测试名称类型必须描述keyString是调用key,必须以GET方式拼接在URL中)secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_search,item_get,item_search_shop等]cacheString否[yes,no]默认yes,将调用缓存的数据,速度比较快result_typeString......
  • MyBatis xml查询,如何可以查询返回boolean类型 ,怎么写,数据存在就返回true,不存在就fals
    您可以在MyBatis的查询方法中,使用COUNT函数查询指定数据是否存在。如果COUNT的返回值为0,表示数据不存在,反之则存在。以下是一个示例:<selectid="dataExists"resultType="boolean">SELECTCOUNT(*)>0ASexistsFROMyour_tableWHEREyour_condition=#......
  • LeetCode 2808 使循环数组所有元素相等的最少秒数
    题目描述原题链接:2808.使循环数组所有元素相等的最少秒数解题思路每次变化可以选择变成前一个元素或后一个元素,包括[0]和[n-1]的转化;换个角度思考,每秒最多可以有两个不同元素nums[i-1]和nums[i+1]变化成nums[i]元素;假设nums[i]元素只出现一次,想要将所有元素同化那么......
  • redis返回nil的情况有哪些
    Redis是一个开源、内存中的数据结构存储器,用作数据库、缓存和消息中间件中。由于其明了的语法和功能的极其丰富,它是一种应用非常广泛的服务器,但即使Redis是一款十分受欢迎的数据库,也可能由于某些原因而导致Redis返回nil。Redis返回nil的原因可能有以下几种:1)Redis实例已离线:......