react的解构赋值

news2024/9/23 23:32:25

我最近在用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;

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1924675.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

多表联合的查询(实例)、对于前端返回数据有很多表,可以分开操作、debug调试教程

2024.7.13 一、 对于多表的更深层的认识1. 认识2. 多表联合查询的列子:3. 对于多表查询的进一步认识4. 在实现功能的时候,原本对于省市县这样的表,对于项目的要求,是直接全部查询出来,然后开始使用,但我想着…

在 CentOS 6.4 VPS 上安装和保护 phpMyAdmin 的方法

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 简介 许多网站和应用程序需要数据库来存储和管理大量信息。MySQL 和 MariaDB 是流行的数据库管理系统,因为它们具有灵活性、…

redisTemplate报错为nil,通过redis-cli查看前缀有乱码

public void set(String key, String value, long timeout) {redisTemplate.opsForValue().set(key, value, timeout, TimeUnit.SECONDS);} 改完之后 public void set(String key, String value, long timeout) {redisTemplate.setKeySerializer(new StringRedisSerializer()…

前端工程化10-webpack静态的模块化打包工具之各种loader处理器

9.1、案例编写 我们创建一个component.js 通过JavaScript创建了一个元素,并且希望给它设置一些样式; 我们自己写的css,要把他加入到Webpack的图结构当中,这样才能被webpack检测到进行打包, style.css–>div_cn.js–>main…

万界星空科技MES系统:食品加工安全的实时监控与智能管理

万界星空科技MES系统通过集成多种技术和功能,能够实时监控食品加工过程中各环节的安全风险。以下是对该系统如何实现实时监控的详细分析: 一、集成传感器和数据分析技术 万界星空科技MES系统利用集成的传感器和数据分析技术,实时监控生产过程…

Linux rsync文件同步工具

scp的不足 1. 性能问题 单线程传输 SCP只使用单线程进行传输,这意味着在传输大文件或大量小文件时,其传输速度和效率可能不如其他多线程工具。 无法压缩数据传输 SCP不支持内置的压缩机制,这在传输大文件时会导致带宽使用效率较低。 2.…

神经网络以及简单的神经网络模型实现

神经网络基本概念: 神经元(Neuron): 神经网络的基本单元,接收输入,应用权重并通过激活函数生成输出。 层(Layer): 神经网络由多层神经元组成。常见的层包括输入层、隐藏层…

【MySQL 进阶】MySQL 程序 -- 详解

一、MySQL 程序简介 MySQL 安装完成通常会包含如下程序: 1、Linux 系统 程序⼀般在 /usr/bin 目录下,可以通过命令查看: 2、Windows系统 目录:你的安装路径\MySQL Server 8.0\bin,可以通过命令查看: 可…

Vue el-input 限制输入内容

&#x1f914;日常项目中经常遇到既要el-input的样式&#xff0c;又要el-input-number限制&#xff0c;所以需要绑定input事件进行约束输入限制。 以下使用自定义指令进行约束el-input输入的值&#xff0c;便于后期统一管理和拓展。 预览 代码 <!DOCTYPE html> <ht…

STM32入门开发操作记录(二)——LED与蜂鸣器

目录 一、工程模板二、点亮主板1. 配置寄存器2. 调用库函数 三、LED1. 闪烁2. 流水灯 四、蜂鸣器 一、工程模板 参照第一篇&#xff0c;新建工程目录ProjectMould&#xff0c;将先前打包好的Start&#xff0c;Library和User文件^C^V过来&#xff0c;并在Keil5内完成器件支持包的…

[MySQL][表操作]详细讲解

目录 1.创建表1.基本语法2.创建表案例 2.查看表结构3.修改表1.语法2.示例3.modify和change区别 4.删除表 1.创建表 1.基本语法 语法&#xff1a; CREATE TABLE table_name (field1 datatype,field2 datatype,field3 datatype ) character set 字符集 collate 校验规则 engin…

阿里云产品流转

本文主要记述如何使用阿里云对数据进行流转&#xff0c;这里只是以topic流转&#xff08;再发布&#xff09;为例进行说明&#xff0c;可能还会有其他类型的流转&#xff0c;不同服务器的流转也可能会不一样&#xff0c;但应该大致相同。 1 创建设备 具体细节可看&#xff1a;…

STM32F103定时器中断详解

目录 目录 目录 前言 一.什么是定时器 1.1 STM32F103定时器概述 1.2基本定时器 1.2通用定时器 1.3高级定时器 1.4 三种定时器区别 基本定时器&#xff08;Basic Timer&#xff09; 通用定时器&#xff08;General-Purpose Timer&#xff09; 高级定时器&#xff08;Advanced Ti…

企业网三层架构

企业网三层架构&#xff1a;是一种层次化模型设计&#xff0c;旨在将复杂的网络设计分成三个层次&#xff0c;每个层次都着重于某些特定的功能&#xff0c;以提高效率和稳定性。 企业网三层架构层次&#xff1a; 接入层&#xff1a;使终端设备接入到网络中来&#xff0c;提供…

提高使用安全,智慧校园在线用户功能概述

智慧校园系统融入了一个查看当前在线用户的功能&#xff0c;这一设计旨在为管理人员提供一个实时的窗口&#xff0c;洞悉校园平台的即时活跃情况&#xff0c;确保系统的高效运作与环境安全。通过这一功能&#xff0c;管理员能够一目了然地看到所有正活跃在平台上的用户群体&…

『 Linux 』匿名管道应用 - 简易进程池

文章目录 池化技术进程池框架及基本思路进程的描述组织管道通信建立的潜在问题 任务的描述与组织子进程读取管道信息控制子进程进程退出及资源回收 池化技术 池化技术是一种编程技巧,一般用于优化资源的分配与复用; 当一种资源需要被使用时这意味着这个资源可能会被进行多次使…

GuLi商城-商品服务-API-品牌管理-JSR303分组校验

注解:@Validated 实体类: package com.nanjing.gulimall.product.entity;import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import com.nanjing.common.valid.ListValue; import com.nanjing.common.valid.Updat…

代码随想录——不同路径Ⅱ(Leetcode 63)

题目链接 动态规划 class Solution {public int uniquePathsWithObstacles(int[][] obstacleGrid) {int m obstacleGrid.length;int n obstacleGrid[0].length;int[][] dp new int[m][n];// 遇到障碍则从(0,0)到达for(int i 0; i < m && obstacleGrid[i][0] …

【C++】初始化列表”存在的意义“和“与构造函数体内定义的区别“

构造函数是为了方便类的初始化而存在&#xff0c;而初始化时会遇到const成员变量、引用成员变量等&#xff0c;这些变量不允许函数内赋值&#xff0c;必须要在初始化时进行赋值&#xff0c;所以就有了初始化列表&#xff0c;初始化列表只能存在于类的构造函数中&#xff0c;用于…

百日筑基第二十天-一头扎进消息队列3-RabbitMQ

百日筑基第二十天-一头扎进消息队列3-RabbitMQ 如上图所示&#xff0c;RabbitMQ 由 Producer、Broker、Consumer 三个大模块组成。生产者将数据发送到 Broker&#xff0c;Broker 接收到数据后&#xff0c;将数据存储到对应的 Queue 里面&#xff0c;消费者从不同的 Queue 消费数…