React组件——类组件

一、组件的概念

使用组件的方式进行编程，可以提高开发效率，提高组件的复用性、提高代码的可维护性和可扩展性

React定义组件的方式有两种

类组件:React16.8版本之前几乎React使用的都是类组件

函数组件:React16.8之后，函数式组件使用的越来越多

二、组件的定义的两种方式

1、ES6类的回顾

类组件：类组件是指使用ES6中class定义的组件称为类组件

class 类名 {

}

类是由属性和方法组成

类中的属性:表示事务的特征

类中的方法:表示的是对象的行为

class 类名{
    属性名1;
    属性名2;
    方法1(){}
    方法2(){}
}

案例1：类的定义

/*
定义一个学生类
    class 类名{}
    类名的规定
    1、类名是由字母、数字、下划线或者$符号组成
    2、名称不能以数字开头
    3、类名直接不能有空格、不能是关键字或者保留字
    4、不能是true、false、null
    5、类名采用驼峰是命名法，每个单词的首字母要大写
    6、要见名知意
*/
class Student {
    sno;//学号
    sname;//姓名
    gender;//性别
    education;//学历
    major;//专业
    introduce(){
        return `学号:${this.sno}\n姓名:${this.sname}\n性别:{this.gender===1?'男':'女'}\n学历:${this.education}\n专业:${this.major}\n`
    }
}
/*
    创建对象的语法
    const/let 对象名 = new 类名()
    给对象赋值的语法
    对象名.属性名=值
    调用对象中的方法
    对象名.方法名()
*/

案例2：构造方法的使用

class Student{
    constructor(sno,sname,gender,education,major){
        this.sno=sno
        this.sname=sname
        this.gender=gender
        this.education=education
        this.major=major
    }
    introduce(){
        return `学号:${this.sno}\n姓名:${this.sname}\n性别:${this.gender}\n学历:${this.education}\n专业:${this.major}`
    }
}

/*
    实例化对象的同时进行初始化
    let/const 对象名=new 类名(实参1，实参1,....,实参n)
 */
const s1=new Student('1001','张三','男','专科','通讯工程')
console.log(s1.introduce());
console.log("*********************************************");
const s2=new Student('1002','李四','男','专科','英语')
console.log(s2.introduce());

案例三：继承的使用

class Teacher{
    constructor(name,school){
        this.name=name
        this.school=school
    }
    introduce(){
        return `我是${this.school}的${this.name}`
    }
    giveLession(){
        console.log('讲解本章目标');
        console.log('讲解本章内容');
        console.log('进行本章总结');
        console.log('安排今日作业');
    }
}

/**
 * 定义一个子类
 * 继承的语法
 * class 子类的名称 extends 父类名称{
 * }
 * super关键字的使用
 * suepr()直接调用父类的构造方法,它的位置必须放在子类构造方法的首行
 * super.父类中的方法/父类中的属性
 * 方法的重写:是在继承关系中，子类中的方法名和父类中的方法名，参数个数相同的这么一种情况，称为方法的重写
 * 方法重写的结果就是子类中的内容完全覆盖父类中方法中的内容
 */
class WebTeacher extends Teacher{
    constructor(name,school){
        super(name,school)
    }
    giveLession(){
        console.log('首先打开vscode开发环境');
        super.giveLession()
    }
}

class TestTeacher extends Teacher{
    constructor(name,school){
        super(name,school)
    }
    giveLession(){
        console.log('打开postman或者vm虚拟机');
        super.giveLession()
    }
}

let zhangsan=new WebTeacher('张三','xxx')
console.log(zhangsan.introduce()); 
zhangsan.giveLession()
console.log('********************************');

let lisi=new WebTeacher('李四','xxx')
console.log(lisi.introduce());
lisi.giveLession()

console.log('**************************************');

const wanger=new TestTeacher('王二','xxx')  

console.log(wanger.introduce())
wanger.giveLession()

2、定义类组件

类组件：是指通过ES6类来定义的组件称为类组件，React中定义类组件有如下约定

类组件首字母大写

类组件必须要继承React.Component父类，这个父类中的相关方法和属性都能被继承

类组件中必须要有一个render方法

这个render必须要有返回值，返回值的内容就是这个类组件的结构(jsx)

由于这个类组件要被别的组件引用，所以使用ES6的默认导出将其导出，便于别的组件引用

import React from "react"
export default class Hello extends React.Component{
    render(){
        return(
        <>
          <h1>Hello组件</h1>
        </>) 
    }
}

类组件定义之后，引用这个类组件

import ReactDOM from 'react-dom/client'
import Hello from './components/Hello'
const template=(<>
    <Hello></Hello>
</>)
const root=ReactDOM.createRoot(document.querySelector('#root'))
root.render(template)

3、定义函数组件

在React中除了类组件之外，也可以定义函数组件

函数租价：所谓函数组件是指通过普通函数或者箭头函数所定义出来的组件称为函数组件

函数组件有如下规定

函数名必须首字母大写

使用ES6的export将默认导出，便于别的组件引用

函数必须要有一个返回值，这个返回的内容是JSX，返回的是该函数组件的结构

export default function HelloWorld(){
    return (
        <>
            <h1>Hello World函数组件</h1>
        </>)
}

注意：如果不返回任何内容，假设返回一个null，页面将没有任何内容

在实际开发过程中，由于这些组件和函数组件它的结构都是固定的，所以可以使用一些插件将其生成出来

 使用rcc生成类组件，使用rfc生成函数组件

三、类组件的事件处理

1、React的事件处理

vue中通过什么绑定事件处理函数

v-on指令来实现绑定，可以通过他的简写@事件类型方式来绑定事件的

在React中通过onClick属性来实现单击事件的绑定的，常见的写法

直接在标签中通过onClick={()=>{}}来实现事件的绑定

在标签中通过onClick={this.类中的普通成员方法}来进行绑定

在标签中通过onClick={this.类中的箭头函数}来进行绑定

在标签中通过onClick={()=>{this.函数名称()}}

import React,{Component} from 'react'

export default class Hello extends Component {

handleClick(){
    console.log("类中的定义的普通方法",this)
}
handleClick2=()=>{
    console.log("类中定义的箭头函数",this)
}
render(){
    return (
     <>
        <button onClick={()=>{
          console.log('我是按钮1，我被点击了~~~~');
        }}>按钮1</button>

        <button onClick={this.handleClick}>按钮2</button>
        <button onClick={this.handleClick2}>按钮3</button>
        <button onClick={()=>{this.handleClick2()}}>按钮4</button>
      </>
    )
   }
}

2、this指向的回顾

let teacher={
    name:'teacher'
}
let student={
    name:'student'
}
let person={
    name:'person',
    show(age,sex){
        return `我叫${this.name},今年${age}岁,我的性别是${sex}`
    }
}
c