ZhenYu's 知识库

外观

React 基础

约 985 字大约 3 分钟

reactfrontendknowledge-base

2026年04月08日

React 是一个用于构建用户界面的库。学习 React 的关键不是死记 API，而是建立几个稳定的心智模型：

  • UI = f(state)
  • 组件是状态和视图的组合单元
  • 数据默认单向流动
  • 渲染、提交、副作用是不同阶段

学习地图

环境与工程入口

现代 React 项目通常优先选择：

  • Vite：开发体验轻量、启动快，适合大多数中后台和内容站点
  • Next.js：需要 SSR、SSG、路由、全栈能力时优先考虑
  • Umi：阿里系中后台、约定式工程体系、权限和插件生态较成熟

React 18 之后的典型入口：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

组件与 JSX

React 组件本质上是输入 props、输出 UI 描述的函数。JSX 只是更易读的语法糖，编译后仍是函数调用。

type WelcomeProps = {
    name: string;
};

export function Welcome({name}: WelcomeProps) {
    return <h1>Hello, {name}</h1>;
}

理解 JSX 时重点关注：

  • 表达式插值：{value}
  • 列表渲染：array.map()
  • 条件渲染：三元表达式、短路表达式
  • key：不是给 React “消警告”用的，而是参与同层节点身份判断

Props、State 与单向数据流

  • props：组件输入，只读
  • state：组件内部可变状态
  • 状态提升：多个组件共享数据时，把状态放到它们最近的公共父组件

常见判断标准：

  • 只是展示数据，用 props
  • 用户交互会改变数据，用 state
  • 多处依赖同一份状态，考虑上移或集中管理

事件与副作用

React 中有两类逻辑不要混在一起：

  • 渲染逻辑：根据当前状态生成 UI
  • 副作用逻辑：请求数据、订阅、定时器、DOM 同步

副作用通常放在 useEffect 中，但不是所有逻辑都需要 useEffect。可以直接在渲染阶段推导出的值，不要额外放状态。

const filtered = list.filter(item => item.visible);

这类派生值应该直接计算，而不是再存一份 filteredState。

从类组件到 Hooks

历史上 React 大量使用类组件和生命周期方法：

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

现代 React 更推荐函数组件 + Hooks：

  • useState：局部状态
  • useEffect：副作用
  • useRef：持久引用，不触发渲染
  • useReducer：复杂状态流转
  • useContext：跨层级共享

Hooks 不是“函数版生命周期”，它更强调按关注点组织逻辑，而不是按阶段拆散逻辑。

表单与受控组件

表单是 React 入门后第一个真正能区分熟练度的部分。

  • 受控组件：值由 React 状态驱动
  • 非受控组件：值由 DOM 自己维护，React 通过 ref 读取

实践中：

  • 简单表单优先受控
  • 文件上传、大型富文本、第三方复杂控件可局部采用非受控

组件设计原则

  • 先组合，再抽象
  • 优先提炼稳定的 props API，而不是先造“万能组件”
  • 状态尽量靠近使用它的地方
  • 同一份数据避免重复存储
  • UI 组件和业务组件分层

容易踩坑的地方

  • 不要把派生值再存成状态
  • 不要在列表中滥用索引作为 key
  • 不要把副作用写进渲染过程
  • 不要在多个状态源之间制造数据镜像
  • 不要为了“解耦”过早引入 Redux 或复杂上下文

推荐学习顺序

  1. JSX、组件、Props、State
  2. 事件、条件渲染、列表渲染、表单
  3. Hooks 与副作用
  4. 路由与页面组织
  5. 状态管理与异步数据流
  6. 性能优化、SSR、原理、源码