【React】02-React面向组件编程

2.1. 基本理解和使用

2.1.1. 使用React开发者工具调试

2.1.2. 效果

1.函数式组件

2.类式组件

复习1.类基本知识

1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。

2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。

3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_类的基本知识title>
head>
<body>
	<script type="text/javascript" >
		/* 
			总结：
				1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
				2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
				3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。
		*/
		//创建一个Person类
		class Person {
			//构造器方法
			constructor(name,age){
				//构造器中的this是谁？—— 类的实例对象
				this.name = name
				this.age = age
			}
			//一般方法
			speak(){
				//speak方法放在了哪里？——类的原型对象上，供实例使用
				//通过Person实例调用speak时，speak中的this就是Person实例
				console.log(`我叫${this.name}，我年龄是${this.age}`);
			}
		}

		//创建一个Student类，继承于Person类
		class Student extends Person {
			constructor(name,age,grade){
				super(name,age)
				this.grade = grade
				this.school = '尚硅谷'
			}
			//重写从父类继承过来的方法
			speak(){
				console.log(`我叫${this.name}，我年龄是${this.age},我读的是${this.grade}年级`);
				this.study()
			}
			study(){
				//study方法放在了哪里？——类的原型对象上，供实例使用
				//通过Student实例调用study时，study中的this就是Student实例
				console.log('我很努力的学习');
			}
		}
		
		class Car {
			constructor(name,price){
				this.name = name
				this.price = price
				// this.wheel = 4
			}
			//类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1
			a = 1
			wheel = 4
			static demo = 100
		}
		const c1 = new Car('奔驰c63',199)
		console.log(c1);
		console.log(Car.demo);
	script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

2.1.3. 注意

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签

2.1.4. 渲染类组件标签的基本流程

React内部会创建组件实例对象
调用render()得到虚拟DOM, 并解析为真实DOM
插入到指定的页面元素内部

2.2. 组件三大核心属性1: state

2.2.1. 效果

需求: 定义一个展示天气信息的组件
1.默认展示天气炎热或凉爽
2.点击文字切换天气

2.2.2. 理解

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2.2.3. 强烈注意

组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
a)强制绑定this: 通过函数对象的bind()
b)箭头函数
状态数据，不能直接修改或更新

2.3. 组件三大核心属性2: props

2.3.1. 效果

需求: 自定义用来显示一个人员信息的组件
1.姓名必须指定，且为字符串类型；
2.性别为字符串类型，如果性别没有指定，默认为男
3.年龄为字符串类型，且为数字类型，默认值为18

2.3.2. 理解

1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中

2.3.3. 作用

1.通过标签属性从组件外向组件内传递变化的数据
2.注意: 组件内部不要修改prop数据

2.3.4. 编码操作

1.内部读取某个属性值

2.对props中的属性值进行类型限制和必要性限制
第一种方式（React v15.5 开始已弃用）：
第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

3.扩展属性: 将对象的所有属性通过props传递

4.默认属性值：

5.组件类的构造函数

2.4. 组件三大核心属性3: refs与事件处理

2.4.1. 效果

需求: 自定义组件, 功能说明如下:

1.点击按钮, 提示第一个输入框中的值

2.当第2个输入框失去焦点时, 提示这个输入框中的值
效果如下：

2.4.1.1字符串形式的ref

2.4.1.2回调函数形式的ref

2.4.1.3回调ref中回调执行次数的问题

2.4.1.4 createRef的使用

2.4.2. 理解

组件内的标签可以定义ref属性来标识自己

2.4.3. 编码

1.字符串形式的ref

2.回调形式的ref

3.createRef创建ref容器·

2.4.4. 事件处理

通过onXxx属性指定事件处理函数(注意大小写)
1)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
2)React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
通过event.target得到发生事件的DOM元素对象

2.5. 收集表单数据

2.5.1. 效果

需求: 定义一个包含表单的组件
输入用户名密码后, 点击登录提示输入信息

2.5.2. 理解

包含表单的组件分类

受控组件

非受控组件

2.5.3 高阶函数柯里化

不使用柯里化实现

相关阅读:
[代码实战和详解]VGG16
【C++】list容器模拟实现
13.SpringBoot项目之Service层
构建高可用的Redis服务(主从复制/哨兵/集群底层原理)
第 42 章 RTC—实时时钟
基于springboot小区物业管理系统
路线中桩测量计算程序浅析
leetcode75 颜色分类，荷兰国旗问题
C++学习笔记（三十五）
算法刷题日志——回溯算法

原文地址：https://blog.csdn.net/liqiannan8023/article/details/133814872