React中用函数定义组件时，参数为props和形如{name，title}的区别

在学习React的过程中，用函数定义组件时，碰到了下面这种情况。函数组件的参数不为props，而是{aaa,bbb}这样的形式，并且这个定义的方式是正确的。这令我费解，它和props本身有什么关系吗？这种定义方式和常规定义有什么不同吗？

根据我的理解，正常定义函数组件时，形式应如下图所示：

翻阅React文档后，只找到下面这句话和问题有些相关：

函数组件接收唯一带有数据的 “props”（代表属性）对象，并返回一个 React 元素

根据前半句话，我的猜测是这样的：

因为函数组件只能接收一个参数props，且props为对象，而{name,title}刚好是一个对象，故必然和props有联系。所以我猜测，props 事实上就是 {name,title} ，props的结构很可能是这样的

props = {
	name: "xxx",
	title: "yyy"
}

而且{props.name}的效果等价于直接使用{name}，也能佐证这一点。

一番思索之后，我越发觉得我的想法是正确的。正欣喜若狂之际，突然灵机一动，我为什么不能直接console.log(props)看一看呢？

结果发现：

没毛病，今天又是傻虎虎的一天。

——————————————————————

原理解释

emmm，不好意思，耽误大家时间了。在我后来的学习中，我意识到了这只是ES6的语法，特来更新一波。
事实上，这里运用了ES6的对象解构赋值方法。简单举个例子

let { name,title } = {aaa:"aaa", name:"Sara", title:"world", bbb:"bbb", ... }

此时，左边的name和title会被正确赋值为"Sara"和"world"。

而props其实就是一个有很多属性的对象。在function Book 的声明过程中，参数设置为了一个对象{ name, title }，这是形参，而外部传递过来的props是一个实参。在调用函数的过程中，实参会赋值给形参，即{ name, title } = props。那么，name和title就被正确赋值了。

这么写的作用

1. 在声明函数的过程中，函数的参数有哪些变得清晰可见。把参数写成prop或者写成{ name, title }这样的形式，明显右边更明了
2. 在函数体内调用参数的时候也更方便。如果参数为props，要这样调用：props.name；而写成{ name, title }形式的话，直接调用name即可。