对象的赋值表达式（组件传值，简写 props）

结构赋值不要求变量必须在结构表达式中声明，如果是给事先声明的变量赋值，则赋值表达式必须包含在一对括号中 ：

说人话就是：
对象的结构赋值，可以包在一对花括号中实现：

// 过去
const p = {
  a: 1,
  b: 2,
};
const c = p.a;
const e = p.b; 
console.log(c, e);	// 3, 4
// 现在
const p = {
  a: 3,
  b: 4,
};
const {a: c, b: e} = p;
console.log(c, e);	// 3, 4

可以理解为就是给对象重命名了。
同样的应用场景体现在组件的 props 传值过程中：

/**
* 体现在父组件为子组件传一堆复杂的值过去
*/
const FatherModule = () => {
  const [a, b] = [3, 4];
  const obj = {
  	first: 1,
	second: [6, 9],
	third: {
	  a,
	  b
	}
  };
  const value = 16;
  // ...
  return <>
  	<ChildModule v1={obj} v2={value} />
  </>
}

/**
* 子组件这边要接受并处理复杂值，可以全部展开，也可以部分展开
* 这里将不再赘述
*/
const ChildModule = ({v1:{first, [v, k], third:{a: b}}, value}) => { 
	console.log(first); // 1
	console.log(v); // 6
	console.log(k); // 9
	console.log(a); // 3
	console.log(b); // 4
	console.log(value); // 16
	return null;
}

/**
* 子组件中，v1 的解构赋值 与 third 的结构赋值同理
* 相当于：
*/
const third = {
  a: {
    o1: 1, 
    o2: 2
  }, 
  b: 4
};
// 解构 third
const {a: c, b: d} = third;	// c:{o1: 1, o2: 2}   d: 4
// 解构 c
const {o1, o2} = c;

其实就是简化的一种写法…