react的解构赋值

左直拳2024-07-14 7:04

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

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

javascript 复制代码

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

是什么意思？

一句句地解构。

首先第一层：

javascript 复制代码

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

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

javascript 复制代码

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

然后第二层，相当于

javascript 复制代码

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

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

但是，这难道不是json对象的定义模式吗，怎么在这里变成了赋值，并且是将左边的东西赋给右边的？只能说这种赋值，忽左忽右，神鬼莫测。简则简矣，可读则未必。