{...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