React
一切都皆组件
React 应用是一棵组件树——从根节点 <App /> 到最末端的 <button>，每个 UI 单元都是组件。任何界面都可以拆分为组件的组合与嵌套。
function App() {
return (
<Layout>
<Header />
<UserCard name="Alice" />
<Footer />
</Layout>
)
}一、组件的形式
| 形式 | 说明 |
|---|---|
| 函数组件 | 推荐，接收 props 返回 JSX |
| 类组件 | 旧方式，有实例和生命周期 |
| 高阶组件 | 接收组件返回增强组件的函数（HOC） |
二、组件的核心特性
封装：UI 和逻辑放在一起，对外只暴露 props 接口。
function UserCard({ name, avatar }: { name: string; avatar: string }) {
return (
<div>
<img src={avatar} alt={name} />
<span>{name}</span>
</div>
)
}可组合：小组件拼成大组件，大组件拼成页面。
单向数据流：父组件通过 props 向下传递数据，子组件通过回调向上通知。
三、组件的分类
| 类型 | 职责 |
|---|---|
| 展示型 | 纯 UI 渲染，只依赖 props |
| 容器型 | 管理状态和副作用，向下传数据 |
| 通用型 | Button、Input 等与业务无关的基础件 |
| 业务型 | 与具体业务强绑定的复合组件 |
为什么这样设计
组件化让 UI 变成可拼装的积木：每块积木独立可测、可复用，拼在一起就是完整页面。这是 React 和传统模板渲染最根本的区别。