渲染组件wrappedComponent时，给组件wrappedComponent通过props传值时，为什么要写成 {...this.state} 的形式？

在高阶组件的学习过程中，渲染组件时，通过props传值，为什么要写成 {…this.state} 这样的形式？

    render(){
      return <WrappedComponent {...this.state}></WrappedComponent>
    }
  }

1.首先组件有两个JS对象，一个state，一个props。

**对象是多个属性的集合，属性有名和值。**这俩都是用来保存信息的，控制组件的渲染输出。
state是在组件内部的，是可变的。
props是用来接受传递给该组件的参数的，是不可以改变的。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

2.es6解构：对象的解构赋值

多属性传值：
（1）定义一个this.props对象，在对象中声明多个键值对，用于表示组件的属性
（2）在组件中使用**{…this.props}**的方式传递属性。
“…”表示JSX的延展操作符，这种方式可以很方便的为组件指定多个属性，并且为属性的值指定数据类型。

（1）定义一个this.props对象，在对象中声明多个**键值对**，用于表示组件的属性
（2）在组件中使用**{...this.props}**的方式传递属性。
“...”表示JSX的延展操作符，这种方式可以很方便的为组件指定多个属性，并且为属性的值指定数据类型。
class MyApp extends React.Component {
	render() {
		return(
			<h1>{this.props.name} : {this.props.age} : {this.props.sex}</h1>
		);
	}
}
let p1 = {
	name: '张三', 
	age: 18,
	sex: '男'
};
ReactDOM.render(
    //<MyApp name='张三' age='18' sex='男' />
	<MyApp {...p1}/>,
	document.getElementById('root')

解构对象属性赋值给不同的变量： 对象的属性名:新定义的属性名
冒号左边的是对象的属性名，右边的是我们新定义的变量名，

let node = {
    name: 'mike',
    age: 25
};
let {name: localName, age, country: localCountry = 'China'} = node;
console.log(localName); //mike
console.log(age); // 25
console.log(localCountry); //China