React 进阶的重点不是 API 越学越多，而是开始从工程、性能和复杂性控制的角度组织应用。

工程化与脚手架

知识架构里提到过：

• create-react-app
• roadhog
• umi
• dva
• Ant Design
• mock.js

今天可以这样理解它们：

• 脚手架：解决项目初始化和构建链路
• 框架：统一路由、权限、数据流和约定
• UI 库：提供交互组件和设计语言
• mock 工具：帮助前后端并行开发

复杂中后台的常见能力

• 动态路由和权限
• 菜单与页面配置化
• 表单和表格密集场景
• 国际化和主题切换
• 埋点与监控
• 错误边界与降级

这些能力决定了为什么 React 生态里会出现 Umi、Ant Design Pro、dva 这类企业级方案。

性能优化的几个重点方向

1. 渲染次数

优先检查：

• 是否有不必要的父组件重渲染
• 是否把大对象、大函数频繁重新创建
• 是否把本地状态抬得过高

2. 列表性能

长列表要优先考虑虚拟列表，只渲染可视区域 DOM。比“到处 memo”更有效。

3. 资源加载

• 路由级拆包
• 图片懒加载
• 组件懒加载
• 关键资源预加载

4. 感知性能

• 骨架屏
• Loading 分层
• 渐进式渲染
• 占位与回退 UI

Suspense、ErrorBoundary 与懒加载

这几项通常配合使用：

• React.lazy：拆分组件代码
• Suspense：处理异步等待态
• ErrorBoundary：兜底渲染错误

它们的价值是让“加载失败”和“渲染失败”都有明确边界，而不是整页白屏。

不可变数据与渲染优化

知识架构里提到 Immutable.js、PureComponent，本质上都在处理一个问题：

如何更稳定地判断“数据有没有变”。

今天的实践更常见：

• 保持状态不可变更新
• 控制状态粒度
• 只在确实有收益时做记忆化

测试

历史上很多 React 项目使用 Jest + Enzyme。现代项目更常见：

• Jest 或 Vitest
• React Testing Library

重点不是测实现细节，而是测用户行为：

• 是否能输入
• 是否能点击
• 是否能看到正确结果
• 异常状态是否正确展示

实践建议

• 先定位真正瓶颈，再做优化
• 列表和路由边界通常是优化优先级最高的地方
• 对复杂后台优先建立统一工程约定
• 不要让性能优化演变成到处堆缓存
• 可观测性、错误处理、加载体验和纯性能同样重要

贡献者: Ra1n

上一页组件化开发

下一页Next.js