React组件分为两大类
1.函数组件
2.类组件（最常用）
组件化
import ReactDom from "react-dom";
//
// 1.通过函数创建一个组件
// 2.函数名字必须大写开头
// 3.函数必须有返回值
function Func1() {
return <h2>这是一个基础组件</h2>;
}
const Hello = () => <div>我是一个箭头组件</div>;
const element = (
<div>
<h1>函数组件学习</h1>
<Func1></Func1>
<Hello></Hello>
</div>
);
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 = () => <div>标题</div>;
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 = () => <div>标题</div>;
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 <div>我是Hello组件</div>;
}
}
const element = (
<div>
<h1>类组件</h1>
<Hello></Hello>
</div>
);
ReactDom.render(element, document.getElementById("root"));
如何把组件单独抽取到JS文件中
新建一个Hello.js的文件
import { Component } from "react";
class Hello extends Component {
render() {
return <div>我是一个Hello组件</div>;
}
}
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 = (
<div>
<h1>类组件</h1>
<Hello></Hello>
<Demo></Demo>
</div>
);
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 <div>我是一个Hello组件{this.state.msg}</div>;
}
}
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 = (
<div>
<h1>类组件</h1>
<Hello></Hello>
<Demo></Demo>
</div>
);
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 (
<div>
<h1>常见的受控组件</h1>
<h3>文本框</h3>
<div>
姓名：
<input
type="text"
value={this.state.username}
onChange={this.changeUsername}
/>
</div>
<h3>文本域</h3>
<div>
描述：
<textarea
name=""
id=""
cols="30"
rows="10"
value={this.state.desc}
onChange={this.changeTextarea}
></textarea>
</div>
<h3>下拉框</h3>
<select
name=""
id=""
value={this.state.city}
onChange={this.changeSelect}
>
选择城市：
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
<h3>多选框</h3>
<div>
<input
type="checkbox"
checked={this.state.checkbox}
onChange={this.changeBox}
/>
是否同意协议
</div>
</div>
);
}
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(<App />, 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 (
<div>
<h1>常见的受控组件</h1>
<h3>文本框</h3>
<div>
姓名：
<input
type="text"
value={this.state.username}
onChange={this.handleChange}
name="username"
/>
</div>
<h3>文本域</h3>
<div>
描述：
<textarea
name=""
id=""
cols="30"
rows="10"
value={this.state.desc}
onChange={this.handleChange}
name="desc"
></textarea>
</div>
<h3>下拉框</h3>
<select
name="city"
id=""
value={this.state.city}
onChange={this.handleChange}
>
选择城市：
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
<h3>多选框</h3>
<div>
<input
type="checkbox"
checked={this.state.checkbox}
onChange={this.handleChange}
name="checkbox"
/>
是否同意协议
</div>
</div>
);
}
handleChange = (e) => {
const { name, type } = e.target;
console.log(name);
this.setState({
[name]: type === "checkbox" ? e.target.checked : e.target.value,
});
};
}
ReactDom.render(<App />, document.getElementById("root"));
使用一个onchange方法然后，使用name判断其使用的是哪个方法
react属性名表达式
在es6以后属性名可以做为表达式使用但是需要使用【】
非受控组件
:::info
非受控组件借助ref，使用原生DOM的方式来获取表单的元素的值
:::
使用设置
1.使用React.createRef()函数创建引用
costructor(){
super()
this.txtRef = React.createRef()
}
txtRef = React.createRef()
2.创建引用对象时，添加文本框
<input type="text" ref={this.txtRef}>
3.通过ref对象获取文本框的内容
handleClick() =>{
console.log(this.txtRef.current.value)
}
不常用的组件，推荐使用配置的组件
