现代 React 模式与原则。Hooks、组合、性能、TypeScript 最佳实践。
React 模式
功能概述
React 模式是一项面向实际任务的技能，主要用于构建生产级 React 应用的原则；1. 组件设计原则；
核心要点
- 服务端组件；
- 数据获取、静态内容；
- 客户端组件；
使用与执行
useState、effects；UI 展示；仅 props；逻辑/状态；每个组件单一职责；Props 向下传递，事件向上传递；组合优于继承；优先选择小巧、专注的组件；Hook 模式；
结果检查与注意事项
何时提取 Hooks；useLocalStorage。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。该技能适合用于一次性任务，也可以接入自动化工作流，与其他技能或上层代理配合完成更完整的业务链路；在组合使用时，应明确每一步的输入输出关系，并避免不同步骤之间出现参数冲突。
React 模式
构建生产级 React 应用的原则。
1. 组件设计原则
组件类型
| 类型 | 用途 | 状态 |
|---|---|---|
| 服务端组件 | 数据获取、静态内容 | 无 |
| 客户端组件 | 交互性 | useState、effects |
| 展示组件 | UI 展示 | 仅 props |
| 容器组件 | 逻辑/状态 | 繁重状态 |
设计规则
- 每个组件单一职责
- Props 向下传递，事件向上传递
- 组合优于继承
- 优先选择小巧、专注的组件
2. Hook 模式
何时提取 Hooks
| 模式 | 提取时机 |
|---|---|
| useLocalStorage | 需要相同存储逻辑时 |
| useDebounce | 多个防抖值时 |
| useFetch | 重复的 fetch 模式 |
| useForm | 复杂表单状态 |
Hook 规则
- Hooks 只能在顶层调用
- 每次渲染保持相同顺序
- 自定义 Hook 以 "use" 开头
- 组件卸载时清理 effects
3. 状态管理选择
| 复杂度 | 解决方案 |
|---|---|
| 简单 | useState, useReducer |
| 共享局部 | Context |
| 服务端状态 | React Query, SWR |
| 复杂全局 | Zustand, Redux Toolkit |
状态放置
| 作用域 | 位置 |
|---|---|
| 单个组件 | useState |
| 父子组件 | 提升状态 |
| 子树 | Context |
| 应用级 | 全局 store |
4. React 19 模式
新增 Hooks
| Hook | 用途 |
|---|---|
| useActionState | 表单提交状态 |
| useOptimistic | 乐观 UI 更新 |
| use | 在渲染中读取资源 |
编译器优势
- 自动记忆化
- 减少手动 useMemo/useCallback
- 专注于纯组件
5. 组合模式
复合组件
- 父组件提供 context
- 子组件消费 context
- 灵活的插槽式组合
- 示例：Tabs、Accordion、Dropdown
Render Props 与 Hooks
| 使用场景 | 优先选择 |
|---|---|
| 可复用逻辑 | 自定义 Hook |
| 渲染灵活性 | Render props |
| 横切关注点 | 高阶组件 |
6. 性能原则
何时优化
| 信号 | 操作 |
|---|---|
| 渲染缓慢 | 先分析性能 |
| 大型列表 | 虚拟化 |
| 计算昂贵 | useMemo |
| 稳定回调 | useCallback |
优化顺序
- 确认是否真的慢
- 使用 DevTools 分析
- 识别瓶颈
- 应用针对性修复
7. 错误处理
Error Boundary 使用
| 作用域 | 放置位置 |
|---|---|
| 应用级 | 根级别 |
| 功能模块 | 路由/功能级别 |
| 组件 | 高风险组件周围 |
错误恢复
- 显示备选 UI
- 记录错误
- 提供重试选项
- 保留用户数据
8. TypeScript 模式
Props 类型定义
| 模式 | 用途 |
|---|---|
| Interface | 组件 props |
| Type | 联合类型、复杂类型 |
| Generic | 可复用组件 |
常见类型
| 需求 | 类型 |
|---|---|
| 子节点 | ReactNode |
| 事件处理 | MouseEventHandler |
| Ref | RefObject |
9. 测试原则
| 层级 | 关注点 |
|---|---|
| 单元测试 | 纯函数、hooks |
| 集成测试 | 组件行为 |
| 端到端测试 | 用户流程 |
测试优先级
- 用户可见行为
- 边界情况
- 错误状态
- 可访问性
10. 反模式
| ❌ 避免 | ✅ 推荐 |
|---|---|
| 深度传递 props | 使用 context |
| 巨型组件 | 拆分为小组件 |
| 什么事都用 useEffect | 服务端组件 |
| 过早优化 | 先分析性能 |
| 索引作为 key | 稳定的唯一 ID |
记住： React 的核心是组合。构建小组件，深思熟虑地组合。
相关专题
本专题围绕 React 框架在大型前端项目中的性能优化展开，讲解组件生命周期优化、虚拟 DOM 原理、状态管理策略及懒加载技术。通过实战案例，帮助开发者构建性能优良、响应迅速的前端应用。
2026.04.13
165
18
本专题专注于 React 18 的高级开发技术，详细讲解 useState、useEffect、useReducer、useContext 等 Hooks 的使用技巧，以及 Redux、Zustand 等状态管理工具的集成与优化方法。通过真实案例，帮助前端开发者构建可维护、性能优良的现代 React 应用。
2026.02.10
183
17
本专题聚焦Go-Zero的API开发，拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则，说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式，并给出网关聚合与接口测试的实践建议。
2026.11.12
0
15
本专题围绕Go-Zero的安装与工具链配置展开，讲清Go版本要求、goctl安装方式、代理镜像、protoc依赖与环境变量设置，说明多版本共存、升级回退与CI流水线安装的做法，并整理安装阶段的常见报错与验证步骤。
2026.11.12
0
15
本专题整理Go-Zero的入门知识，从框架定位、环境准备到跑通第一个API服务，讲清目录分层、配置加载、日志与中间件的基本用法，并对比Gin、Kratos的差异，帮助Go开发者建立整体认知，判断它是否适合当前项目。
2026.11.12
0
15
本专题从实际API接口调试场景出发，讲解Postman身份认证的完整配置流程，包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查，帮助用户正确完成接口授权与访问验证。
2026.11.06
0
12
围绕Postman HTTP请求头配置展开，讲解Headers选项的具体使用方式，包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法，帮助用户解决接口调试过程中遇到的请求头配置问题。
2026.11.06
0
13
详细介绍Postman接口请求的创建与发送方法，涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看，帮助用户掌握Postman接口请求的完整操作流程。
2026.11.06
0
10
DBeaver数据导入专题，整理Excel、CSV、SQL、TXT等常见文件的数据导入方法，涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作，帮助用户将本地文件中的数据写入数据库，并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。
2026.11.05
0
12
热门下载
相关下载
精品课程
最新文章