{...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，比如我们的 status 是：

status = {
    arg1: '1',
    arg2: '2'
};

那当我们使用 {...status}这样的语法时就相当于将对象里的键和属性相对应

<Signin {...status} />
<!--等价于-->
<Signin arg1='1' arg2='2' />

Answer 2

扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(1, ...[2, 3, 4], 5)
1 2 3 4 5

Answer 3

“展开”status：

const status = {a: "a", b: "b"};
{ ...status } // => { a: "a", b: "b" }
{ c: "c", ...status, d: "d" } // => { a: "a", b: "b", c: "c", d: "d"}

所以，{...status}相当于Object.assign({}, status);