{...status}这种写法怎么理解

Question

在学react-hooks时看到这样一段代码

function Box(props) {

 const [value, setValue] = useState(0)
 
 let status = useSigninStatus(false) function Incv(){   return setValue(value+1)
 } function Decv(){   return setValue(value-1)
 } return(
   <div >
     <header>
       <Signin {...status} />
       <Counter isSignin={status.isSignin}  value={value} Incrm={Incv} Decrm={Decv} />
     </header>
   </div>
 )
}

value={value}我懂，不过Signin这里直接写{...status}我没见过，想问一下怎么理解，是特殊的语法吗？

Answer 1

这种写法类似于python中的**kwargs，比如我们的&nbsp;status&nbsp;是：status&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;arg1:&nbsp;'1',&nbsp;&nbsp;&nbsp;&nbsp;arg2:&nbsp;'2'};那当我们使用 {...status}这样的语法时就相当于将对象里的键和属性相对应<Signin&nbsp;{...status}&nbsp;/><!--等价于--><Signin&nbsp;arg1='1'&nbsp;arg2='2'&nbsp;/>

Answer 2

扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(1, ...[2, 3, 4], 5)&nbsp;1 2 3 4 5