react的解构赋值

我最近在用react讨生活。我的感觉，react开发效率不高。这当然应该是我还不熟悉react的缘故。但是，在阅读react代码过程中，其中一个容易困惑的地方是它到处充斥着的解构赋值。当然了，解构赋值并不是React特有的功能，而是ES6（ECMAScript 2015）引入到JavaScript中的语言特性。但react中泛滥成灾是普遍现象。

一、读懂解构赋值

据说解构赋值简化了语言，使得代码更具可读性云云。不敢苟同。比如下面这个：

render() {
  const {
    sysUser: { data, roleSelectData, orgTreeData, userType },
    loading,
  } = this.props;
  ...
}

是什么意思？

一句句地解构。

首先第一层：

render() {
  const {sysUser,loading} = this.props;
  ...
}

哦，这是解构赋值，相当于

const sysUser = this.props.sysUser;
const loading = this.props.loading;

然后第二层，相当于

const sysUser = this.props.sysUser;
const loading = this.props.loading;

const data = sysUser.data;
const roleSelectData = sysUsedr.orgTreeData;
const userType = sysUser.userType;

但是，sysUser: { data, roleSelectData, orgTreeData, userType }，这难道不就是一个json元素，意思就是sysUser= { data, roleSelectData, orgTreeData, userType }吗？怎么在这里反过来，变成了给右边赋值了呢？只能说这种赋值，忽左忽右，神鬼莫测。简则简矣，可读则未必。

二、解构赋值时如何将被赋值变量重命名

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    const { values: { id, ship_cnname: chineseName, ship_enname: englishName, ...rest } } = props;

    this.state = {
      formVals: {
        id,
        chineseName, // 重命名为chineseName
        englishName, // 重命名为englishName
        ...rest,     // 其他属性保持不变
      }
    };
  }

  render() {
    return (
      <div>
        <p>ID: {this.state.formVals.id}</p>
        <p>Chinese Name: {this.state.formVals.chineseName}</p>
        <p>English Name: {this.state.formVals.englishName}</p>
        {/* 其他渲染逻辑 */}
      </div>
    );
  }
}

---

解构赋值，如果赋值对象中不存在，则被赋值对象则采用默认值：

  const { alarmTargetList = [], alarmModeData = [] } = mapStore.allWarningData