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

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

相关推荐
黑客老陈22 分钟前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞（利用xss钓鱼）
运维·服务器·前端·网络·安全·web3·xss
正小安28 分钟前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置（Modules 模块化篇）
前端·vite
暴富的Tdy1 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se1 小时前
Vue中使用a标签下载静态资源文件（比如excel、pdf等），纯前端操作
前端·vue.js·excel
m0_748235611 小时前
web 渗透学习指南——初学者防入狱篇
前端
℘团子এ1 小时前
js和html中，将Excel文件渲染在页面上
javascript·html·excel
z千鑫1 小时前
【前端】入门指南：Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js
m0_748250742 小时前
Web入门常用标签、属性、属性值
前端
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10ARM学习（31）编译器对overlay方式的支持