当前位置: 首页 > news >正文

0201基础-组件-React

1 组件和模块

1.1 模块

对外提供特定功能的js程序,一般就是一个js文件

  • 为什么拆分模块呢?随着业务逻辑增加,代码越来越多,越来越复杂。
  • 作用:复用js,简化js,提高js运行效率

1.2 模块化

当应用的js都是以模块来编写时,这个应用就是一个模块化的应用。

模块化的演变:参考JS模块化

1.3 组件

  • 理解:用来实现局部功能效果的代码和资源的集合(html/css/js/images等等)
  • 作用:复用编码,简化项目编码,提高运行效率

1.4 组件化

当应用以多组件的方式实现,这个应用就是一个多组件的应用。

组件化的发展:

  • Redux 演变过程01:组件化过程
  • 前端构建演进

2 开发者工具

chrome浏览器插件React Developer Tools,通过Chrome应用商店或者下载离线插件安装,图标如下所示:在这里插入图片描述

3 React组件

3.1 函数式组件

定义一个简单的函数式组件,代码如下:

  <script type="text/babel">// 1.创建函数式组件function MyComponent() {// 此处this undefined babel编译之后开启严格模式console.log(this);return <h2>函数定义的组件(适用于简单组件的定义)</h2>}// 2.渲染虚拟DOM到页面ReactDOM.render(<MyComponent/>, document.getElementById('test'))/*注意事项1.组件函数名首字母大写2.渲染组件标签,名称相同,标签闭合执行ReactDom.render(标签, 容器)之后流程  1.React解析组件标签,找到了MyComponent组件。2.发现组件是用函数定义的,随后调用函数,把虚拟DOM转为真实DOM,随后呈现在页面上。*/</script>

在浏览器中通过开发者工具查看,如下图3.1-1所示:在这里插入图片描述

把Demo函数复制到babel.cn在线工具,编译后代码3.2-1-2所示:

"use strict";function MyComponent() {// 此处this undefined babel编译之后开启严格模式console.log(this);return /*#__PURE__*/React.createElement("h2", null, "\u51FD\u6570\u5B9A\u4E49\u7684\u7EC4\u4EF6(\u9002\u7528\u4E8E\u7B80\u5355\u7EC4\u4EF6\u7684\u5B9A\u4E49)");
}
  • 开启严格模式后,this不在指向windows
  • jsx语法最终被编译为js

3.2 类式组件

定义组件代码如下:

  <script type="text/babel">// 1.类式组件class MyComponent extends React.Component {// 此处this undefined babel编译之后开启严格模式render() {// render 放在了MyComponent的原型对象上,供实例使用// 此处this指向MyComponent的实例对象console.log(this);return <h2>我是用类定义的组件(适用于复杂组件的定义)</h2>}}// 2.渲染虚拟DOM到页面ReactDOM.render(<MyComponent/>, document.getElementById('test'))/*1.React解析组件标签,找到了MyComponent组件。2.发现组件是用类定义的,随后new该类的实例,通过该实例调用原型上的render方法3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面上*/</script>

控制台输出:在这里插入图片描述

  • React三大属性
    • state
    • props
    • refs

后记

❓QQ:806797785

⭐️源代码仓库地址:https://gitee.com/gaogzhen/react-study

参考:

[1]尚硅谷React教程(2022加更,B站超火react教程)[CP/OL].2020-12-15.p7-p11.

相关文章:

0201基础-组件-React

1 组件和模块 1.1 模块 对外提供特定功能的js程序&#xff0c;一般就是一个js文件 为什么拆分模块呢&#xff1f;随着业务逻辑增加&#xff0c;代码越来越多&#xff0c;越来越复杂。作用&#xff1a;复用js&#xff0c;简化js&#xff0c;提高js运行效率 1.2 模块化 当应用…...

论文笔记 | Conducting research in marketing with quasi-experiments

这篇论文是Journal of Marketing上的论文&#xff0c;讲了使用准实验来进行论文研究的一些事项。外生性识别的来源、几种准实验方法的注意点还有内生性的解决。 这篇论文对于准实验或者是平常论文的展开有一个非常友善的指导功能&#xff0c;可以阅读~ 摘要&#xff1a;本文旨…...

有关Android导览(Android Navigation component)

文章目录小结有关Android导览(Android Navigation component)碰到的问题参考小结 在使用Android导览(Android Navigation component)碰到很多问题。解决了一些问题&#xff0c;但是“Skipped xxx frames! The application may be doing too much work on its main thread”这样…...

01 C语言计算

C语言计算 1、变量 用途&#xff1a;需要存放输入的数据 定义格式&#xff1a;数据类型 变量名&#xff08;用于区分其他变量&#xff09; 变量名格式&#xff1a;只能由字母/下划线/数字构成&#xff0c;首位不能是数字&#xff1b;且变量名不能是标识符 **变量赋值和初始…...

java单元测试简介(基于SpringBoot)

java单元测试简介&#xff08;基于SpringBoot&#xff09;mockitomock创建mock对象的另一种方式&#xff1a;Mockverifystubbing(存根)Spy&#xff08;间谍&#xff09;mock 静态方法mockito在springboot mock中的实战mockito 通常&#xff0c;在我们写单测时&#xff0c;会遇…...

Linux常用命令操作

文件目录操作 查看文件列表 ls #输出列表信息 ls -l #输出详细列表信息 ls -a #输出隐藏文件 ls -la #输出包含的隐藏文件及详细信息 ll # ls-l的缩写rwx分别对应读取&#xff0c;写入&#xff0c;执行权限&#xff0c;前面有d代表是文件夹 创建文件 touch file.txt #创建…...

SpringCloud GateWay配置—TLS 和 SSL、Http超时配置

一、TLS 和 SSL网关可以按照通常的 Spring 服务器配置侦听 HTTPS 上的请求。 以下示例演示如何执行此操作&#xff1a;application.ymlserver:ssl:enabled: truekey-alias: scgkey-store-password: scg1234key-store: classpath:scg-keystore.p12key-store-type: PKCS12您可以将…...

python Django中的cookies和session会话保持技术

cookies和session都是为了保持会话状态而诞生的两个存储技术会话定义&#xff1a; 从打开浏览器访问一个网站&#xff0c;到关闭浏览器结束此次访问&#xff0c;称之为一次会话HTTP协议是无状态的&#xff0c;导致会话状态难以保持Cookies-定义 cookies是保存在客户端浏览器上的…...

vue3的v-model指令

1. 普通input输入框双向绑定 <template><!-- 1. 普通input输入框双向绑定 --><!-- 其实等价于&#xff1a;<input :modelValue"title" update:modelValue"newTitle>titlenewTitle"/> --><input type"text" v-mod…...

Matlab小波去噪——基于wden函数的去噪分析

文章目录一、问题描述二、代码问题1&#xff1a;原始信号加6分贝高斯白噪声问题2&#xff1a;确定合适的小波基函数问题3&#xff1a;确定最合适的阈值计算估计方法问题4&#xff1a;确定合适的分解层数问题5&#xff1a;实际信号去噪问题6&#xff1a;对比三、演示视频最后一、…...

分布式对象存储——Apache Hadoop Ozone

前言 本文隶属于专栏《大数据技术体系》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见大数据技术体系 1. 概述 Ozone是Apache Hadoop项目的子项目&#xf…...

Linux 和数据库笔记-03

今天主要内容数据库相关介绍数据库(软件)常见类型Navicat 工具基本使用常见的数据类型和约束(重点)SQL 语句的编写(表和数据)一. 数据库是什么?为什么学习数据库软件中产生的所有数据, 最终都要存储于数据库当中测试人员如果想要进行数据查询/数据校验, 就必须掌握对数据库的基…...

布尔定律---布尔代数的基本定律

一、单变量布尔定律 1、0-1定律 2、互补定律 3、重叠定律 4、还原定律 小结&#xff1a;或运算和与运算定律的差别在于&#xff1a;所有的“|”运算符换成“&”&#xff0c;运算结果为 0 换成 1。这就是对偶定律。它不仅是单逻辑变量的定律&#xff0c;而且对于所有布尔定…...

OSG三维渲染引擎编程学习之七十五:“第七章:OSG场景图形交互” 之 “7.6 多视图”

目录 第七章 OSG场景图形交互 7.6 多视图 7.6.1 多视图描述 7.6.2 多视图相机示例 第七章 OSG场景图形交互 作为一个成熟的三维渲染引擎,需...

【计算机】单位制前缀的歧义-KB、kb、MB混用

引言 经常遇到容量、带宽的单位&#xff0c;MB&#xff0c;GB在进行单位换算时&#xff0c;总是傻傻分不清&#xff0c;查些资料浅记录一下。 公制&#xff08;metric system&#xff09; 又译米制&#xff0c;是一个国际化十进位量度系统。法国在1799年开始使用公制&#xf…...

nodejs调用浏览器打开URL链接

本文主要介绍的是node.js调用Chrome浏览器/默认浏览器打开链接地址的相关内容&#xff0c;分享出来供大家参考学习&#xff0c;下面来一起看看详细的介绍&#xff1a; 安装第三方插件open 通过open模块&#xff0c;可以在任何平台上打开某个浏览器网址。 通过NPM安装 npm i…...

ARM uboot 的移植2-从三星官方 uboot 开始移植

一、inand 驱动问题的解决 1、先从现象出发定位问题 (1) 解决问题的第一步&#xff0c;是定位问题。所谓定位问题&#xff0c;就是找到源代码当中导致这个问题的那一句或者那几句代码。有时候解决这个问题需要修改的代码和直接导致这个问题的代码是不同的。我们这里说的定位问…...

js作用域和作用域链

1、局部作用域分为函数作用域和块作用域 1.1、函数作用域: 在函数内部声明的变量只能在函数内部被访问&#xff0c;外部无法直接访问。 总结 1.函数内部声明的变量&#xff0c;在函数外部无法被访问 2.函数的参数也是函数内部的局部变量 3.不同函数内部声明的变量无法互相访…...

C语言字符串

目录 一、字符串的引入和注意事项 1.1 字符串定义的几种方式&#xff1a; 1.2 定义字符串的方法一和方法二的区别&#xff1a; 1.3 字符串输出的几种方式&#xff1a; 1.3.1 循环下标法遍历输出字符串&#xff1a; 1.3.2 转义字符%s输出字符串&#xff1a; 1.3.3 使用puts函…...

Eureka注册中心快速入门

一、提供者与消费者**服务提供者&#xff1a;**一次业务中&#xff0c;被其他微服务调用的服务。&#xff08;提供接口给其他微服务&#xff09;**服务消费者&#xff1a;**一次业务中&#xff0c;调用其他微服务的服务。&#xff08;调用其它微服务提供的接口&#xff09;比如…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...