React组件详解

news2025/1/16 18:48:39

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"));

方法二：
支持类实例属性
image.png

受控组件

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)
}

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1470498.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[设计模式Java实现附plantuml源码~行为型]对象间的联动～观察者模式

[设计模式Java实现附plantuml源码~行为型]对象间的联动～观察者模式

前言&#xff1a; 为什么之前写过Golang 版的设计模式&#xff0c;还在重新写Java 版&#xff1f; 答&#xff1a;因为对于我而言&#xff0c;当然也希望对正在学习的大伙有帮助。Java作为一门纯面向对象的语言&#xff0c;更适合用于学习设计模式。 为什么类图要附上uml 因为很…
阅读更多...
数字化转型导师鹏：政府数字化转型政务服务类案例研究

数字化转型导师鹏：政府数字化转型政务服务类案例研究

政府数字化转型政务服务类案例研究 课程背景&#xff1a; 很多地方政府存在以下问题&#xff1a; 不清楚标杆省政府数字化转型的政务服务类成功案例 不清楚地级市政府数字化转型的政务服务类成功案例 不清楚县区级政府数字化转型的政务服务类成功案例 课程特色&#x…
阅读更多...
PX4FMU和PX4IO最底层启动过程分析（下）

PX4FMU和PX4IO最底层启动过程分析（下）

PX4FMU和PX4IO最底层启动过程分析&#xff08;下&#xff09; PX4FMU的系统启动函数为nash_main(int argc,char *argv[]) PX4IO的系统启动函数为nash_start(int argc,char *argv[]) PX4FMU启动函数nash_main(int argc,char *argv[]) 首先分析一下nash_main(int argc,char *a…
阅读更多...
2023最新盲盒交友脱单系统源码

2023最新盲盒交友脱单系统源码

源码获取方式 搜一搜&#xff1a;万能工具箱合集 点击资源库直接进去获取源码即可 如果没看到就是待更新&#xff0c;会陆续更新上 或 源码软件库 最新盲盒交友脱单系统源码&#xff0c;纸条广场&#xff0c;单独抽取/连抽/同城抽取/高质量盒子 新增功能包括心动推荐&#xff…
阅读更多...
JavaAPI常用类02

JavaAPI常用类02

目录 基本数据类型封装类 包装类常用属性方法 8中基本数据类型各自所对应的包装类 以下方法以java.lang.Integer为例 代码 运行 装箱和拆箱 装箱 何为装箱 代码 范围问题 代码 运行 拆箱 代码 String类 概述 代码 运行 创建形式 画图讲解 代码 运行 构造…
阅读更多...
golang通过http访问外部网址

golang通过http访问外部网址

不同项目之前,通过http访问,进行数据沟通 先设定一个接口,确认外部能访问到 PHP写一个接口 public function ceshi_return() {$data $this->request->param();$id $data[id];$res Db::name(user)->field(id,status,price,name)->where([id>$id])->find…
阅读更多...
数据可视化基础与应用-01-课程目标与职位分析

数据可视化基础与应用-01-课程目标与职位分析

总结 本系列是数据可视化基础与应用的第01篇&#xff0c;主要介绍本门课程的课程目标与职位分析 教材 数据可视化基础与应用 课程教学方法 布鲁姆教学法 认知领域&#xff08;cognitive domain&#xff09; 1.知道&#xff08;知识&#xff09;&#xff08;knowledge&#…
阅读更多...
Jitsi Meet 大型视频会议调优方案

Jitsi Meet 大型视频会议调优方案

jitsi meet 大型视频会议调优方案 在举办一些大型会议的时候，比如100个人会议，为了节约宽带和节省资源，我们并不会选择传输全部的音视频资源。 举个例子，比如100个人线下会议，如果大家都说话的情况下，大家要么听不清，要么听得是声音最大的那几个人。 视频会议也可以借…
阅读更多...
数据结构之顺序表链表

数据结构之顺序表链表

一、线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串... 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直…
阅读更多...
模型 OIIC(目标、障碍、洞察、挑战)

模型 OIIC(目标、障碍、洞察、挑战)

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_总纲目录。沟通方案工具。 1 OIIC(目标、障碍、洞察、挑战)模型的应用 1.1 OIIC 驱动的汽车配件渠道优化 一家知名的汽车配件制造商&#xff0c;旗下品牌拥有众多产品&#xff0c;其销售渠道广泛&#xff0c;不仅在…
阅读更多...
2024Node.js零基础教程(小白友好型)，nodejs新手到高手，（九）NodeJS入门——http模块

2024Node.js零基础教程(小白友好型)，nodejs新手到高手，（九）NodeJS入门——http模块

060_http模块_网页URL之绝对路径 hello&#xff0c;大家好&#xff0c;这一个小题的话我们来补充一个之前学习过的内容&#xff0c;就是网页当中的URL&#xff0c;咱们这个小题的话主要是来说一下绝对路径&#xff0c;有同学可能会说&#xff0c;这这这&#xff0c;不对劲&…
阅读更多...
access数据库泄露与IIS短文件名利用

access数据库泄露与IIS短文件名利用

access数据库 Microsoft Office Access是微软把 数据库引擎 的图形用户界面和 软件开发工具 结合在一起的一个 数据库管理系统 它的数据库是没有库名的&#xff0c;都是表名。 (借用别的up的图)是不是感觉有点像excel access数据库的后缀是.mdb access数据库泄露漏洞 如果…
阅读更多...
面向对象设计模式

面向对象设计模式

一、单例 一个类只能创建唯一一个对象 利用限制构造、static完成 二、工厂模式 优势&#xff1a;规范接口&#xff08;纯虚函数&#xff09;&#xff1b;实现多态&#xff08;虚函数表&#xff09;&#xff1b;继承 1、简单工厂 一个工厂创建所有产品。 返回基类指针可…
阅读更多...
你要不要搞副业

你要不要搞副业

最近看到了几个网友关于年轻人要不要搞副业的一点讨论&#xff0c;学习到了很多。整理分享如下&#xff1a; plantegg 你要不要搞副业&#xff1f; 最近网上看到很多讨论搞副业和远程工作的&#xff0c;我也说点自己的经验看法 当然这完全是出于个人认知肯定不是完全对的、也…
阅读更多...
Bluejay电调固件介绍和烧录Bluejay电调固件到BLHeli_S电调的方法

Bluejay电调固件介绍和烧录Bluejay电调固件到BLHeli_S电调的方法

Bluejay电调固件介绍和烧录Bluejay电调固件到BLHeli_S电调的方法 Bluejay电调固件基本介绍Bluejay电调固件特点烧录Bluejay固件准备材料烧录过程 电调调参参数说明 Bluejay电调固件基本介绍 Bluejay是一种数字电调固件&#xff0c;用于控制多旋翼无人机中的无刷电机。 该电调固…
阅读更多...
蓝桥杯算法赛 第 6 场 小白入门赛 解题报告 | 珂学家 | 简单场 + 元宵节日快乐

蓝桥杯算法赛 第 6 场 小白入门赛 解题报告 | 珂学家 | 简单场 + 元宵节日快乐

前言 整体评价 因为适逢元宵节&#xff0c;所以这场以娱乐为主。 A. 元宵节快乐 题型: 签到 节日快乐&#xff0c;出题人也说出来自己的心愿, 祝大家AK快乐! import java.util.Scanner;public class Main {public static void main(String[] args) {System.out.println(&qu…
阅读更多...
QT day3 作业2.22

QT day3 作业2.22

思维导图&#xff1a; 作业&#xff1a; 完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到…
阅读更多...
微信小程序自制动态导航栏

微信小程序自制动态导航栏

写在前面 关于微信小程序导航栏的问题以及解决办法我已经在先前的文章中有提到&#xff0c;点击下面的链接即可跳转~ &#x1f90f;微信小程序自定义的导航栏&#x1f90f; 在这篇文章中我们需要做一个这样的导航栏&#xff01;先上效果图 &#x1f447;&#x1f447;&#x1f…
阅读更多...
如何将实景三维倾斜模型叠加到三维地球上？

如何将实景三维倾斜模型叠加到三维地球上？

​ 通过以下方法可以将实景三维倾斜模型叠加到三维地球上。 方法/步骤 下载三维地图浏览器 http://www.geosaas.com/download/map3dbrowser.exe&#xff0c;安装完成后桌面上出现”三维地图浏览器“图标。 2、双击桌面图标打开”三维地图浏览器“ 3、点击“倾斜模型”…
阅读更多...
物麒平台根据入耳出耳状态使能或禁止触摸按键实现方法

物麒平台根据入耳出耳状态使能或禁止触摸按键实现方法

是否需要申请加入数字音频系统研究开发交流答疑群(课题组)？可加我微信hezkz17, 本群提供音频技术答疑服务，+群赠送语音信号处理降噪算法，蓝牙耳机音频，DSP音频项目核心开发资 料, 1 消息发送 2 消息处理 3 宏开关 4 代码 #include "app_main.h" #include &q…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023