React 组件

组件是 React 应用的最小构成单元：一段可复用、可独立维护的界面片段。React 页面本质上是"组件的组合"，把界面拆成组件能大幅提升代码的复用性与可读性。

什么是组件

从概念上讲，组件就是一个"接收输入、返回界面"的函数或类：输入是 props，返回的是一段 JSX。使用组件时把它当成自定义标签，约定名称首字母大写，小写开头会被当成普通 HTML 标签。

函数组件

最简单的组件是普通函数，直接返回 JSX：

function Hello() {
  return <h1>你好，React！</h1>
}

在 App 组件里以标签形式使用：<Hello />，页面即显示"你好，React！"。

类组件

用 ES6 class 定义的组件必须继承 Component，并实现 render() 方法：

import { Component } from 'react'

class Welcome extends Component {
  render() {
    return <h1>欢迎光临</h1>
  }
}

函数组件与类组件能完成同样的事情，新项目更推荐函数组件搭配 Hooks（后面的章节会系统讲解）。

组件组合与拆分

组件可以互相嵌套：把大页面拆成多个职责单一的小组件，再组合起来：

function Header() {
  return <header>顶部导航</header>
}

function Footer() {
  return <footer>版权信息</footer>
}

function Page() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  )
}

拆分原则：某块界面被多处复用、或单个函数过于臃肿时，就把它抽成独立组件。

组件的导入导出

通常一个文件放一个组件，用 export default 导出、import 引入，让组件能跨文件复用：

// src/Header.jsx
export default function Header() {
  return <header>顶部导航</header>
}

// src/App.jsx
import Header from './Header'

function App() {
  return (
    <div>
      <Header />
    </div>
  )
}

小结：组件 = 返回 JSX 的函数（或类），页面由组件树组合而成。先学会用函数组件搭页面，再逐步掌握状态与 props，让组件真正"活"起来。