應用級性能優化，需要結合實際需求展開分析，通常我們需要從以下幾個方面來考慮：
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
