React组件分为两大类 1.函数组件 2.类组件（最常用）

组件化

import ReactDom from "react-dom";

//

// 1.通过函数创建一个组件

// 2.函数名字必须大写开头

// 3.函数必须有返回值

function Func1() {

return

这是一个基础组件

}

const Hello = () =>

const element = (

);

ReactDom.render(element, document.getElementById("root"));

若定义的是函数组件需要满足： 1.通过函数创建一个组件 2.函数名字必须大写开头 3.函数必须有返回值

类组件

import ReactDom from "react-dom";

class Teacher {

// 构造函数

constructor(name, age) {

this.name = name;

this.age = age;

}

sayhi() {

console.log("大家好，我是", this.name);

}

}

const student = new Teacher("张三", 30);

student.sayhi();

const element = () =>

ReactDom.render(element, document.getElementById("root"));

类的继承

import ReactDom from "react-dom";

class Teacher {

// 构造函数

constructor(name, age) {

this.name = name;

this.age = age;

}

sayhi() {

console.log("大家好，我是", this.name);

}

}

//

// const student = new Teacher("张三", 30);

// student.sayhi();

class SuperTeach extends Teacher {

constructor(name, age, skill) {

super();

this.skill = skill;

}

say() {

console.log("口若悬河");

}

}

const teach = new Teacher("ZHANGYU", 98);

const superteach = new SuperTeach("ZHANG8", 100000, "激光眼");

superteach.say();

teach.sayhi();

console.log(superteach.skill);

const element = () =>

ReactDom.render(element, document.getElementById("root"));

**extends：**是继承的关键词 **super()*可以进行属性的继承，并且增加新的属性

类组件

类组件必须继承React.Component类中必须有render（）

import ReactDom from "react-dom";

import React from "react";

// 1.类组件必须继承React.Component

//2.类中必须有方法

class Hello extends React.Component {

render() {

return

}

}

const element = (

);

ReactDom.render(element, document.getElementById("root"));

如何把组件单独抽取到JS文件中

新建一个Hello.js的文件

import { Component } from "react";

class Hello extends Component {

render() {

return

}

}

export default Hello;

在index.js文件中引入Hello.js文件

import ReactDom from "react-dom";

import React from "react";

import Hello from "./Components/Hello";

import Demo from "./Components/Demo";

// 1.类组件必须继承React.Component

const element = (

);

ReactDom.render(element, document.getElementById("root"));

有状态组件和无状态组件

函数组件是无状态组件函数组件不能自己提供数据类组件是有状态组件，它可以自己提供数据状态（State）为组件的私有数据，当组件状态发生变化时，页面结构也会发生变化函数组件没有状态，只负责页面展示，性能比较高类组件有着自己的状态，负责**更新UI,**只要类组件数据发生变化，UI就会发生更新在复杂的项目中，一般都是由函数组件和类组件共同完成的，React16.8以后提出的Hooks,让我们更多的使用函数组件完成

类组件如何提供状态

import { Component } from "react";

class Hello extends Component {

constructor() {

super();

this.state = {

msg: "Hello",

content: 0,

};

}

render() {

return

}

}

export default Hello;

import ReactDom from "react-dom";

import React from "react";

import Hello from "./Components/Hello";

import Demo from "./Components/Demo";

// 1.类组件必须继承React.Component

const element = (

);

ReactDom.render(element, document.getElementById("root"));

方法二： 支持类实例属性

受控组件

import ReactDom from "react-dom";

import React, { Component } from "react";

class App extends Component {

state = {

count: 0,

msg: "啦啦啦",

lists: ["张三", "李四", "王五"],

newItem: "", // 添加一个新的 state 属性用于存储输入框的值

username: "",

desc: "",

city: "",

checkbox: false,

};

render() {

return (

);

}

changeUsername = (e) => {

this.setState({

username: e.target.value,

});

};

changeTextarea = (e) => {

this.setState({

desc: e.target.value,

});

};

changeSelect = (e) => {

this.setState({

city: e.target.value,

});

};

changeBox = (e) => {

this.setState({

checkbox: e.target.checked,

});

};

}

ReactDom.render(, document.getElementById("root"));

总结：首先提供一个State属性，然后提供一个onchange方法，在onchange里面提供一个函数用来改变值

多个受控组件封装

import ReactDom from "react-dom";

import React, { Component } from "react";

class App extends Component {

state = {

count: 0,

msg: "啦啦啦",

lists: ["张三", "李四", "王五"],

newItem: "", // 添加一个新的 state 属性用于存储输入框的值

username: "",

desc: "",

city: "",

checkbox: false,

};

render() {

return (

);

}

handleChange = (e) => {

const { name, type } = e.target;

console.log(name);

this.setState({

[name]: type === "checkbox" ? e.target.checked : e.target.value,

});

};

}

ReactDom.render(, document.getElementById("root"));

使用一个onchange方法然后，使用name判断其使用的是哪个方法

react属性名表达式

在es6以后属性名可以做为表达式使用但是需要使用【】

非受控组件

:::info 非受控组件借助ref，使用原生DOM的方式来获取表单的元素的值 ::: 使用设置 1.使用React.createRef()函数创建引用

costructor(){

super()

this.txtRef = React.createRef()

}

txtRef = React.createRef()

2.创建引用对象时，添加文本框

3.通过ref对象获取文本框的内容

handleClick() =>{

console.log(this.txtRef.current.value)

}

不常用的组件，推荐使用配置的组件

文章来源