react的解构赋值

我最近在用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对象的定义模式吗,怎么在这里变成了赋值,并且是将左边的东西赋给右边的?只能说这种赋值,忽左忽右,神鬼莫测。简则简矣,可读则未必。

相关推荐
handsome-wolf9 个月前
JavaScript 第十五章(变量声明、作用域与解构赋值)
前端·javascript·作用域·变量·解构赋值
十八只兔10 个月前
Vue3:使用解构赋值来读取对象里的键-值对(值也是对象)
javascript·vue.js·es6·解构赋值
俊刚、10 个月前
ES6之解构赋值详解
前端·javascript·es6·解构赋值
儒雅的烤地瓜1 年前
JavaScript展开操作符(Spread operator)的应用详解
javascript·展开运算符·解构赋值·spread operator·javascript展开操作符