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;

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

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

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

相关文章

OpenCV距离变换函数distanceTransform的使用

操作系统:ubuntu22.04OpenCV版本:OpenCV4.9IDE:Visual Studio Code编程语言:C11 功能描述 distanceTransform是OpenCV库中的一个非常有用的函数,主要用于计算图像中每个像素到最近的背景(通常是非零像素到零像素&…

tkinter-TinUI-xml实战(12)pip可视化管理器

引言 pip命令行工具在平常使用方面确实足够简单,本项目只是作为TinUI多界面开发的示例。 当然,总有人想用GUI版pip,实际上也有。不过现在,我们就来手搓一个基于python和TinUI(tkinter)的pip可视化管理器。…

数据结构——考研笔记(二)线性表的定义和线性表之顺序表

文章目录 二、线性表2.1 定义、基本操作2.1.1 知识总览2.1.2 线性表的定义2.1.3 线性表的基本操作2.1.4 知识回顾与重要考点 2.2 顺序表2.2.1 知识总览2.2.2 顺序表的定义2.2.3 顺序表的实现——静态分配2.2.4 顺序表的实现——动态分配2.2.5 知识回顾与重要考点2.2.6 顺序表的…

【分库】分库的设计与原则、数据分片策略、垂直分库与水平分库、数据库引擎选择与配置优化

目录 引言 分库设计原则 数据分片策略的选择 垂直分库 vs 水平分库的比较 数据库引擎选择与配置优化 引言 在面对日益增长的数据量和不断升级的业务需求时,传统的单体数据库架构往往难以应对高并发、大数据量带来的性能瓶颈。为了突破这些限制,分库…

C++ 桥接模式 (Bridge Pattern)

C 桥接模式 (Bridge Pattern) flyfish 桥接模式是一种结构型设计模式,旨在将抽象部分与它的实现部分分离,使它们可以独立地变化。桥接模式可以使一个类的功能层次结构与实现层次结构分离。它通过引入一个中间接口(桥接接口)将具…

godis源码分析——database存储核心1

前言 redis的核心是数据的快速存储,下面就来分析一下godis的底层存储是如何实现,先分析单机服务。 此文采用抓大放小原则,先大的流程方向,再抓细节。 流程图 源码分析 现在以客户端连接,并发起set key val命令为例…

Ansible 安装及使用说明

方案1. 直接下载 源码包到本地后安装 ansible 下载地址:https://releases.ansible.com/ansible/ ansible社区: https://github.com/ansible/ansible 下载地址:GitHub - ansible/ansible at v2.9.0 方案2. 以腾讯的yum源说明:腾讯云文档…

Pytorch lr_scheduler 调整学习率

Pytorch lr_scheduler 调整学习率 背景 上篇文章连接 在运行 VGG 代码的时候有这么几行代码: # 定义模型进行训练 model VGG16() # model.load_state_dict(torch.load(./my-VGG16.pth)) optimizer optim.SGD(model.parameters(), lr0.01, weight_decay5e-3) l…

vue3中谷歌地图+外网申请-原生-实现地址输入搜索+点击地图获取地址回显 +获取国外的geoJson实现省市区级联选择

一. 效果&#xff1a;输入后显示相关的地址列表&#xff0c;选中后出现标示图标和居中定位 1.初始化谷歌地图 在index.html加上谷歌api请求库 <script src"https://maps.googleapis.com/maps/api/js?key申请到的谷歌地图密钥&vweekly&librariesgeometry,place…

基于TCP的在线词典系统(分阶段实现)(阻塞io和多路io复用(select)实现)

1.功能说明 一共四个功能&#xff1a; 注册 登录 查询单词 查询历史记录 单词和解释保存在文件中&#xff0c;单词和解释只占一行, 一行最多300个字节&#xff0c;单词和解释之间至少有一个空格。 2.功能演示 3、分阶段完成各个功能 3.1 完成服务器和客户端的连接 servic…

Vue el-input 限制输入内容

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

响应式编程-数据劫持

响应式编程的核心思想是观察者模式&#xff0c;被观察的对象我们可以称之为数据源&#xff0c;所以&#xff0c;数据是响应式编程所关注的核心。 假设有一个数据对象,有一个字段age值为18&#xff1a; let obj {age:18 } 然后有一个函数&#xff0c;在这个函数打印age字段&a…

quota使用

一、检查系统是否支持 grep CONFIG_QUOTA /boot/config* CONFIG_QUOTAy CONFIG_QUOTA_NETLINK_INTERFACEy # CONFIG_QUOTA_DEBUG is not set CONFIG_QUOTA_TREEy CONFIG_QUOTACTLy CONFIG_QUOTACTL_COMPATy二、安装 yum install -y quota三、配置 3.1 创建磁盘 格式一定要 …

【RPC注册发现框架实战】一个简易的RPC注册发现框架

Java实现 服务端起10个线程ID监听40-49这10个端口&#xff0c;这10个端口注册到注册中心&#xff0c;提供同一个服务&#xff0c;发个A&#xff0c;响应B&#xff0c;客户端起10个线程去注册中心请求 好的&#xff0c;我们可以通过实现一个简单的服务端、注册中心和客户端来达到…

【机器学习】精准农业新纪元:机器学习引领的作物管理革命

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀目录 &#x1f50d;1. 引言&#x1f4d2;2. 精准农业的背景与现状&#x1f341;精准农业的概念与发展历程&#x1f342;国内外精准农业实践案…

002-ESP32怎么 上电就能启动指定代码

ESP32在上电后能够启动指定代码&#xff0c;主要依赖于其内部的启动流程和固件配置。以下是一个详细的步骤说明&#xff0c;以及如何实现这一功能&#xff1a; 一、ESP32的启动流程 ESP32的启动流程大致可以分为以下几个阶段&#xff1a; 一级引导程序&#xff1a;被固化在ES…

【数据结构】手写堆 HEAP

heap【堆】掌握 手写上浮、下沉、建堆函数 对一组数进行堆排序 直接使用接口函数heapq 什么是堆&#xff1f;&#xff1f;&#xff1f;堆是一个二叉树。也就是有两个叉。下面是一个大根堆&#xff1a; 大根堆的每一个根节点比他的子节点都大 有大根堆就有小根堆&#xff1…

Qt/QML学习-BusyIndicator

QML学习 BusyIndicator例程视频讲解代码 main.qml import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")BusyIndicator {id: busyIndicatoranchors.fill: parentM…

深入解析std::string的设计哲学【C++、STL库】

为什么在C中字符串长度需要调用函数而不是直接访问&#xff1f;深入解析std::string的设计哲学 在C中&#xff0c;获取字符串长度需要调用size()或length()方法&#xff0c;而不是直接访问一个常量或属性。这一设计让许多初学者感到困惑。那么&#xff0c;为什么C会选择这种方…

(南京观海微电子)——二极管应用及选取

二极管是 用半导体材料(硅、硒、锗等)制成的一种电子器件。二极管有两个电极&#xff0c;正极&#xff0c;又叫阳极&#xff1b;负极&#xff0c;又叫阴极&#xff0c;给二极管两极间加上正向电压时&#xff0c;二极管导通&#xff0c; 加上反向电压时&#xff0c;二极管截止。…