应用级性能优化，需要结合实际需求展开分析，通常我们需要从以下几个方面来考虑：
1. 识别性能瓶颈
识别性能瓶颈是优化的第一步，通过各种工具和方法找到影响性能的主要原因：
-
React Profiler：使用 React DevTools 中的 Profiler 分析组件的渲染时间和更新频率，识别出性能瓶颈组件。
-
Chrome DevTools Performance 面板：通过记录页面的加载、渲染和 JavaScript 执行时间，发现导致页面卡顿或延迟的原因，如长时间的计算或频繁的重绘。
-
Web Vitals：使用 Web Vitals 来测量页面的核心性能指标，如加载时间、交互延迟和页面稳定性，从用户体验的角度找出瓶颈。
2. 组件设计优化
组件的设计和实现对性能有重要影响，优化组件可以显著提高应用的响应速度：
-
React.memo：对纯展示组件使用 React.memo，避免因父组件更新而引发的不必要渲染。
-
useCallback 和 useMemo：使用 useCallback 缓存函数，useMemo 缓存复杂计算的结果，减少子组件的重复渲染。
-
长列表虚拟化：对于渲染大量数据的组件（如表格和列表），使用 React Window 或 React Virtualized 实现列表虚拟化，仅渲染可视区域的数据，减少 DOM 节点数量。
-
懒加载：使用 React.lazy 和 Suspense 实现组件的按需加载，减少首屏渲染的 JavaScript 体积，提高加载速度。
3. 状态优化
状态管理的设计和使用方式直接影响组件的渲染频率和性能：
-
减少状态提升：仅在必要时提升状态，避免状态提升导致的全局渲染，保持状态尽量靠近使用它的组件。
-
拆分状态和选择性更新：拆分大的状态对象，使用 useSelector 精确选择需要的状态部分，减少不必要的渲染。
-
优化 Context 使用：避免 Context 的全局更新，使用多个 Context 或 useMemo 包裹提供的值来减少重渲染。
-
避免深层嵌套更新：避免不必要的深层状态嵌套更新，通过合理的状态设计减少不相关组件的重渲染。
// 代码块
state = {userInfo: {name}
}// 非常精准只订阅 name 的变更
useSelector(state => state.userInfo.name)4. 性能监控
持续的性能监控和优化是保持应用良好性能的重要手段：
-
性能监控工具：使用 Google Lighthouse、Web Vitals 和其他性能监控工具持续跟踪应用的性能表现。
-
日志和警报：设置性能日志和警报，及时发现应用的性能问题，如内存泄漏、长时间的无响应操作等。
-
用户体验测试：通过用户体验测试和性能模拟，评估真实环境下的应用表现，发现潜在的性能瓶颈并做出改进。
5. 补充资料
-
performance: Window: performance property - Web APIs | MDN
-
webvitals: https://web.dev/articles/vitals?hl=zh-cn
-
sentry: Sentry Docs | Application Performance Monitoring & Error Tracking Software
-
tracing: Tracing
-
构建分析: rollup-plugin-visualizer - npm
-
React Devtools: React Developer Tools – React
-
React Profiler: <Profiler> – React
-
editor jotai 优化状态: https://github.com/toeverything/AFFINE
