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

一、React介绍

1、特点
（1）用组件创建用户界面
（2）用代码和标签编写组件
（3）在任何地方添加交互
（4）使用框架进行全栈开发
（5）支持构建Web应用程序和原生应用程序

2、什么是组件
组件是UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面
React组件是返回标签的JavaScript函数
React组件必须以大写字母开头，而HTML标签则必须是小写字母

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

二、两种组件的定义

1、两种组件的写法
（1）类组件
特点：用ES6面向对象语法，有生命周期、有this、有state、有上下文、有ref
缺点：相对函数式组件来讲，性能较差，不能使用Hooks
开发：相对函数式组件的写法，显得很啰嗦

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

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

（2）函数组件
自React诞生以来，本来就有这种写法
特点：用函数式编程，没有生命周期，也没有state，没有this，没有上下文，没有ref，什么特性都没有
优点：相对于类组件，性能较好
开发：自React16.8之后，React新增了Hooks API，在函数式组件中使用Hooks API，可以模拟以上所缺失的所有功能

// 函数组件（function组件）
function B(props) {
    console.log("---props B", props)
    return (
        <div>
            <h1>函数组件</h1>
        </div>
    )
}

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

（4）共同点
无论是类组件，还是函数式组件，他们都有props（父子组件通信的纽带）
在类组件中使用this.props访问，在函数式组件中它的入参就是props

2、组件关系
（1）抛出A类组件

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

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

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

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

export default App