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 }吗？怎么在这里反过来，变成了给右边赋值了呢？只能说这种赋值，忽左忽右，神鬼莫测。简则简矣，可读则未必。