当前位置: 首页 > 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;比如…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...