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

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

电脑桌面太单调,用Python写一个桌面小宠物应用。

下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡&#xff0c;可以响应鼠标点击&#xff0c;并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...

联邦学习带宽资源分配

带宽资源分配是指在网络中如何合理分配有限的带宽资源&#xff0c;以满足各个通信任务和用户的需求&#xff0c;尤其是在多用户共享带宽的情况下&#xff0c;如何确保各个设备或用户的通信需求得到高效且公平的满足。带宽是网络中的一个重要资源&#xff0c;通常指的是单位时间…...

codeforces C. Cool Partition

目录 题目简述&#xff1a; 思路&#xff1a; 总代码&#xff1a; https://codeforces.com/contest/2117/problem/C 题目简述&#xff1a; 给定一个整数数组&#xff0c;现要求你对数组进行分割&#xff0c;但需满足条件&#xff1a;前一个子数组中的值必须在后一个子数组中…...