React组件
创始人
2024-05-09 01:15:24
0

React组件

  • 1.组件基本介绍
  • 2.React创建组件的两种方式
    • 2.1 函数组件
    • 2.2 类与继承
      • 2.2.1 class 基本语法
      • 2.2.2 extends 实现继承
    • 2.3 将组件提取到单独的js文件中
    • 2.4 有状态组件和无状态组件
    • 2.5 类组件的状态

1.组件基本介绍

  • 组件是React中最基本的内容,使用React就是在使用组件
  • 组件表示页面中的部分功能
  • 多个组件可以实现完整的页面功能
  • 组件特点:可复用,独立,可组合
    在这里插入图片描述

2.React创建组件的两种方式

2.1 函数组件

函数组件:使用JS的函数或者箭头函数创建的组件

  • 为了区分普通标签,函数组件的名称必须大写字母开头
  • 函数组件必须有返回值,表示该组件的结构
  • 如果返回值为null,表示不渲染任何内容

使用函数创建组件

function Hello () {return (
这是我的函数组件
) }

使用箭头函数创建组件

const Hello = () => 
这是一个函数组件

使用组件

ReactDOM.render(, document.getElementById('root'))

例子:
01-函数组件-基本使用

import React from 'react'
import ReactDOM from 'react-dom'/* 1. 通过函数创建一个组件即可1. 组件的名字必须是大写开头  为了区分html原有的标签2. 组件必须返回一段结构3. 如果组件不想渲染任何的内容  也需要return null
*/
function Hello() {return 
我是hello组件
}const element = (

函数组件

{/* 使用组件 */}
)ReactDOM.render(element, document.getElementById('root'))

02-函数组件-箭头函数

import React from 'react'
import ReactDOM from 'react-dom'const Hello = () =>
我是Hello组件
const element = (

函数组件

{/* 使用组件 */}
)ReactDOM.render(element, document.getElementById('root'))

在这里插入图片描述

2.2 类与继承

2.2.1 class 基本语法

  • 在 ES6 之前通过构造函数创建对象
  • 在 ES6 中新增了一个关键字 class,类 和构造函数类似,用于创建对象
    -类与对象的区别
    -类:指的是一类的事物,是个概念,比如车 手机 水杯等
    -对象:一个具体的事物,有具体的特征和行为,比如一个手机,我的手机等, 类可以创建出来对象。
  • 类创建对象的基本语法
    -基本语法class 类名{}
    -构造函数constructor的用法,创建对象
    -在类中提供方法,直接提供即可
    -在类中不需要使用,分隔
/* class 类  extends 继承 */
// function Teacher(name, age) {
//   this.name = name
//   this.age = age
// }// Teacher.prototype.sayHi = function () {
//   console.log('大家好,我是' + this.name)
// }// const stu = new Teacher('松哥', 29)
// console.log(stu)
// stu.sayHi()// class是一个语法糖
class Teacher {// 构造函数constructor(name, age) {this.name = namethis.age = age}sayHi() {console.log('大家好,我是' + this.name)}sing() {console.log('能够唱歌')}
}const stu = new Teacher('松哥', 29)
console.log(stu)
stu.sing()

在这里插入图片描述

2.2.2 extends 实现继承

  • extends 基本使用
  • 类可以使用它继承的类中所有的成员(属性和方法)
  • 类中可以提供自己的属性和方法
  • 注意:如果想要给类中新增属性,必须先调用 super 方法
/* Person  人Chinese 中国人African 非洲人
*/
class Person {constructor(name, gender) {this.name = namethis.gender = gender}eat() {console.log('都会吃')}
}class Chinese extends Person {constructor(name, gender) {// 父类的构造函数super(name, gender)this.skin = 'yellow'}pingpong() {console.log('打乒乓球')}
}const c1 = new Chinese('姚明', 40)
console.log(c1)
c1.eat()
c1.pingpong()class African extends Person {constructor(name, gender) {super(name, gender)this.skin = 'black'}run() {console.log('跑的贼快')}
}const xh = new African('小黑', 30)
console.log(xh)

在这里插入图片描述

2.3 将组件提取到单独的js文件中

项目中的组件多了之后,该如何组织这些组件呢?

  • 选择一:将所有组件放在同一个JS文件中
  • 选择二:将每个组件放到单独的JS文件中
  • 组件作为一个独立的个体,一般都会放到一个单独的 JS 文件中

实现方式

  1. 创建Hello.js

  2. 创建组件(函数 或 类)

  3. 在 Hello.js 中导出该组件

  4. 在 index.js 中导入 Hello 组件

  5. 渲染组件,

05-类组件的语法

import { Component } from 'react'
import ReactDOM from 'react-dom'/* 1. 类组件必须继承React.Component2. 必须提供render方法3. render方法必须由返回值,需要返回一段结构
*/
class Hello extends Component {render() {return 
我是hello组件
} }const element = (

类组件

)ReactDOM.render(element, document.getElementById('root'))

在这里插入图片描述
06-把组件抽取到独立的js中
在这里插入图片描述

Demo

const Demo = () => 
我是一个函数组件
export default Demo

Hello

import { Component } from 'react'class Hello extends Component {render() {return 
我是一个Hello组件
} } export default Hello

index

import ReactDOM from 'react-dom'
import Hello from './components/Hello.jsx'
import Demo from './components/Demo.jsx'const element = (

类组件

)ReactDOM.render(element, document.getElementById('root'))

在这里插入图片描述

2.4 有状态组件和无状态组件

  • 函数组件又叫做无状态组件 函数组件是不能自己提供数据【前提:基于hooks之前说的】
  • 类组件又叫做有状态组件 类组件可以自己提供数据,,,,组件内部的状态(数据如果发生了改变,内容会自动的更新)数据驱动视图
  • 状态(state)即组件的私有数据,当组件的状态发生了改变,页面结构也就发生了改变。
  • 函数组件是没有状态的,只负责页面的展示(静态,不会发生变化)性能比较高
  • 类组件有自己的状态,负责更新UI,只要类组件的数据发生了改变,UI就会发生更新。
  • 在复杂的项目中,一般都是由函数组件和类组件共同配合来完成的。【增加了使用者的负担,所以后来有了hooks

比如计数器案例,点击按钮让数值+1, 0和1就是不同时刻的状态,当状态从0变成1之后,UI也要跟着发生变化。React想要实现这种功能,就需要使用有状态组件来完成。
在这里插入图片描述

2.5 类组件的状态

  • 状态state即数据,是组件内部的私有数据,只有在组件内部可以使用
  • state的值是一个对象,表示一个组件中可以有多个数据
  • state的基本使用

07-类组件提供状态

import { Component } from 'react'
import ReactDOM from 'react-dom'/* 给类组件提供状态
*/
class App extends Component {constructor() {super()// 给this增加一个属性 statethis.state = {msg: 'hello',count: 0,}}render() {return (

我是根组件

{this.state.msg}
{this.state.count}
)} }ReactDOM.render(, document.getElementById('root'))

在这里插入图片描述
09-类组件-提供状态简写

import { Component } from 'react'
import ReactDOM from 'react-dom'/* 给类组件提供状态
*/
class App extends Component {// constructor() {//   super()//   // 给this增加一个属性 state//   this.state = {//     msg: 'hello',//     count: 0,//   }// }state = {msg: 'hello',count: 0,}render() {return (

我是根组件

{this.state.msg}
{this.state.count}
)} }ReactDOM.render(, document.getElementById('root'))

在这里插入图片描述

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...