React组件详解

饭一口口吃2024-02-27 0:32

React组件分为两大类

1.函数组件
2.类组件（最常用）

组件化

python 复制代码 
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.函数必须有返回值

类组件

python 复制代码 
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"));

类的继承

python 复制代码 
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（）
python 复制代码 
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的文件

python 复制代码 
import { Component } from "react";

class Hello extends Component {
  render() {
    return <div>我是一个Hello组件</div>;
  }
}

export default Hello;

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

python 复制代码 
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,让我们更多的使用函数组件完成

类组件如何提供状态

python 复制代码 
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;
python 复制代码 
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"));

方法二：

支持类实例属性

受控组件

python 复制代码 
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()函数创建引用

javascript 复制代码 
costructor(){
  super()
  this.txtRef = React.createRef()
}
txtRef = React.createRef()

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

javascript 复制代码 
<input type="text" ref={this.txtRef}>

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

javascript 复制代码 
handleClick() =>{
  console.log(this.txtRef.current.value)
}

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

相关推荐
崔庆才丨静觅5 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60616 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了6 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅6 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅6 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅7 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment7 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅7 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊7 小时前
jwt介绍
前端
爱敲代码的小鱼7 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示