React组件详解

最新推荐文章于 2024-08-03 21:44:22 发布
最新推荐文章于 2024-08-03 21:44:22 发布
阅读量999 收藏 8
点赞数 4
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36662706/article/details/136279402
版权

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

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

饭一口口吃
关注
专栏目录
React组件——类组件
m0_58471238的博客
01-15 6709
React组件——类组件
组件化定义函数组件和类组件
weixin_45632765的博客
09-19 385
react 组件化定义函数组件和类组件
react中的函数式组件和类式组件
jieyucx的博客
10-26 2203
{/* 内容 */}
react的组件分为类组件和函数组件
最新发布
左直拳的马桶_日用桶
08-03 870
在 React 中，类组件和函数组件是两种不同的组件定义方式。它们各有特点，适用于不同的场景。类组件 vs. 函数组件代码简洁性：函数组件通常比类组件更简洁。状态管理：类组件通过 this.state 和 this.setState 管理状态，而函数组件使用 useState 钩子。生命周期管理：类组件使用生命周期方法，而函数组件使用 useEffect 钩子（Hook）来管理副作用。
React 类组件
weixin_44530344的博客
09-10 612
类组件必须继承React.Component必须有render函数render函数中必须有return。
React组件
gy99csdn的博客
01-06 1663
组件是React中最基本的内容，使用React就是在使用组件组件表示页面中的部分功能多个组件可以实现完整的页面功能组件特点：可复用，独立，可组合。
React 组件介绍
qiqiyiyi_的博客
12-20 406
React 组件 props 属性和 state 属性       内容大纲：                      1、Re...
利用ES6语法重构React组件详解
08-31
React ES6 语法重构组件详解 React ES6 语法重构组件详解是指使用 ES6 语法对 React 组件进行重构的过程。该过程主要涉及到组件的创建、属性、状态和 this 等方面的变化。 一、创建组件 在 ES6 语法中，创建组件...
React中如何引入Angular组件详解
12-10
在React中引入Angular组件，可以使用`create-react-app`创建一个新的React应用，然后在React组件中直接使用Angular组件，就像使用其他React组件一样。例如： ```jsx {/* ... */} ...
React组件三大类：类组件、函数组件、高阶组件
你若盛开，清风自来
07-15 1491
本文将详细介绍React中的类组件、函数组件和高阶组件，帮助读者理解它们的概念、使用场景和优势，以便在实际项目中合理选择和使用。类组件、函数组件和高阶组件是React中三种常见的组件类型，它们各自具有独特的特点和优势。掌握这三种组件类型的使用方法，可以根据实际需求在项目中合理选择和使用。
【React】React 组件
Jessieeeeeee的博客
06-24 1441
React 组件
React类组件
qq_51130780的博客
07-06 963
类组件的使用
[React]关于React的组件
梦想成为全栈的切图仔
09-16 1556
在react中，我们可以这样认为一切皆组件。我们的项目就是基于组件。class 是类组件，function 则为函数式组件。本章我们就一起来仔仔细细的玩懂React的组件。
React的组件
LXY224的博客
09-21 677
一、组件的几种创建方式 对于React来说组件Component算是它的核心之一。用了React的时间也不短了，记录一下以便以后翻看 1 createClass 用ES5的方法React.createClass来创建一个组件 import React from 'react'; class Test = React.createClass({ render(){ ...
React组件通信详解与实例
"React组件间通信的多种方法及其应用" 在React开发中，组件间的通信是构建复杂应用程序的关键。React的组件化设计使得代码可复用性和可维护性大大提高，但同时也带来了组件间数据传递的问题。以下是React组件间通信...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

饭一口口吃

来杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值