微前端允许多个团队独立交付模块，但需要设计路由、共享依赖与通信。

核心概念

• Module Federation 支持运行时加载远程模块。
• Single-SPA 提供生命周期管理，协调多个框架。
• 共享组件库需要版本锁定与兼容策略。

实战步骤

• 配置 Webpack Module Federation 暴露与消费 React 模块。
• 构建全局事件总线或使用 RxJS 管理通信。
• 通过设计系统统一 UI 与交互。

GraphQL 提供灵活的数据查询模型，React 需要配套的缓存与类型管理。

核心概念

• Apollo、Urql、Relay 提供不同的客户端策略。
• GraphQL Code Generator 自动生成 hooks 与类型。
• 批量请求与缓存策略减少网络开销。

实战步骤

• 构建 Fragment-first 模式，保持组件与查询耦合。
• 利用乐观更新提升交互体验。
• 通过 Apollo Link 实现鉴权、重试、埋点。

无障碍支持是专业应用的基本能力，React 需要在语义与交互上达标。

核心概念

• 确保语义化标签，例如按钮、标题、导航。
• 使用 aria-* 属性补充辅助信息。
• 管理焦点顺序与键盘操作，提升可用性。

实战步骤

• 构建 useFocusTrap Hook 管理模态对话框焦点。
• 利用 react-aria 提供的可访问组件基元。
• 对复杂组件编写 Axe 自动化测试。

系统化的性能优化离不开监控、代码策略与渲染流程分析。

核心概念

• React Profiler 可以记录渲染时间线，定位多次渲染。
• memo、useMemo、useCallback 控制引用稳定性。
• 避免在渲染中创建新对象，减少 diff 成本。

实战步骤

• 使用 why-did-you-render 检测不必要的更新。
• 将大型列表交由虚拟滚动，仅渲染可视区域。
• 利用 Web Vitals 捕捉实际用户的交互指标。

Fabric、TurboModules、JSI 等新特性为 React Native 带来更高性能。

核心概念

• Fabric 渲染器采用多线程同步，提升更新速度。
• TurboModules 通过 JSI 直接访问原生模块，降低桥接开销。
• Hermes 引擎在启动性能与内存占用上更优。

实战步骤

• 迁移到新架构时开启 newArchitecture 标志并升级依赖。
• 使用 Flipper + React Devtools 分析性能瓶颈。
• 避免频繁 setState，尽量利用 FlatList、SectionList。

Suspense 统一了异步 UI 状态管理，但需要数据层协作。

核心概念

• 资源读取需要抛出 Promise，配合 Suspense 边界显示占位。
• ErrorBoundary 管理错误 fallback，保证用户体验。
• 结合第三方库（React Query/SWR）可直接使用 Suspense。

实战步骤

• 封装资源工厂：createResource(asyncFn) 返回 read API。
• 按页面拆分 Suspense 边界，减少全局 loading 闪烁。
• 用 startTransition 区分优先级，避免阻塞输入。

Edge 渲染让页面靠近用户，但需要考虑计算配额及数据一致性。

核心概念

• app 目录可针对不同路径配置 runtime 为 edge 或 nodejs。
• Edge 函数需使用兼容 API，如 fetch、crypto、Web Streams。
• 缓存策略结合 revalidatePath、Route Handlers 控制。

实战步骤

• 对动态路由启用 dynamic = 'force-dynamic' 确保实时数据。
• 使用 KV、PlanetScale 等服务提供低延迟数据源。
• 结合实验室指标监控 TTFB 与缓存命中率。

React Server Components (RSC) 将组件逻辑在服务端执行，减少前端 bundle。

核心概念

• 服务端组件可以直接访问数据库，不会出现在客户端 bundle 中。
• 客户端与服务端组件通过 use client 指令分界。
• 流式渲染提升首屏体验，需要处理 Suspense 边界。

实战步骤

• 在 Next.js 13+ 中使用 App Router 构建 RSC 路由。
• 封装数据访问层，确保服务端组件具备安全的权限校验。
• 利用 cache() 函数对服务端数据做 memo。

Redux Toolkit 简化了配置，但构建企业级状态治理仍需策略。

核心概念

• 使用 Slice 划分领域，配合 Entity Adapter 管理列表数据。
• RTK Query 提供缓存、重试、轮询能力。
• 中间件链路用于埋点、权限校验与错误上报。

实战步骤

• 定义 API Slice，将接口调用与缓存策略集中管理。
• 借助 createListenerMiddleware 监听动作，驱动复杂流程。
• 在 SSR 场景下序列化 store，防止非序列化数据。

Hooks 让函数组件具备状态能力，但需要遵循架构规范维护长期可读性。

核心概念

• 自定义 Hook 应聚焦单一职责，并通过返回对象暴露可组合 API。
• Hook 需要遵循调用顺序不可变的规则，避免条件分支内部调用。
• 结合 Context + Hook 构建跨组件状态共享模型。

实战步骤

• 使用 useReducer 管理复杂状态机，搭配 Immer 提升可维护性。
• 通过 useSyncExternalStore 接入第三方状态源。
• 建立 Hook 测试基座，使用 React Testing Library 验证副作用。