前端基础之《React（9）—React组件》

csj502026-05-13 11:20

一、React介绍

1、特点

（1）用组件创建用户界面

（2）用代码和标签编写组件

（3）在任何地方添加交互

（4）使用框架进行全栈开发

（5）支持构建Web应用程序和原生应用程序

2、什么是组件

组件是UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面

React组件是返回标签的JavaScript函数

React组件必须以大写字母开头，而HTML标签则必须是小写字母

3、React组件有两种写法，一种是类组件的写法，一种是函数式组件写法

二、JSX语法

1、两种组件的写法

（1）类组件

特点：用ES6面向对象语法，有生命周期、有this、有state、有上下文、有ref

缺点：相对函数式组件来讲，性能较差

javascript 复制代码

import {Component} from 'react' // 解构语法

// 类组件（class组件）
class A extends Component {
    render() { // 渲染方法，类组件生命周期中生成虚拟DOM
        return (
            <div>
                <h1>类组件</h1>
            </div>
        )
    }
}

（2）函数组件

自React诞生以来，本来就有这种写法

特点：用函数式编程，没有生命周期，也没有state，没有this，没有上下文，没有ref，什么特性都没有

优点：相对于类组件，性能较好

javascript 复制代码

// 函数组件（function组件）
function B() {
    return (
        <div>
            <h1>函数组件</h1>
        </div>
    )
}

（3）React 19已经主推函数组件+Hooks‌的开发模式，类组件处于"遗留支持"状态

2、组件关系

（1）抛出A类组件

javascript 复制代码

export default A // 抛出A类组件
export {B} // 抛出B函数组件

（2）main.js挂载根组件App，根组件App挂载A类组件、B函数组件

javascript 复制代码

import A from '@/pages/jsx/index.jsx'
import {B} from '@/pages/jsx/index.jsx'

function App() {
    return (
        <div>
            <A />
            <B />
        </div>
    )
}

export default App