react项目优化方案

下面给你一套实战级、可直接落地的 React 项目优化策略覆盖渲染性能、打包体积、代码层面、体验层面、工程层面。适合中大型 React / React TS 项目。一、渲染性能优化最核心 ⭐1️⃣ 减少不必要的重渲染✅React.memoconst Child React.memo(({ count }: { count: number }) { return div{count}/div })✅useMemoconsttotaluseMemo(()computeExpensiveValue(a,b),[a,b])✅useCallbackconsthandleClickuseCallback((){doSomething()},[])口诀props 不变 →memo计算昂贵 →useMemo函数引用 →useCallback2️⃣ 状态下放State Colocation❌ 错误const App () { const [modalVisible, setModalVisible] useState(false) }✅ 正确const Modal () { const [visible, setVisible] useState(false) }✅状态离使用它的组件越近越好3️⃣ 避免匿名函数 / 对象字面量❌ 错误Child onClick{() {}} config{{ a: 1 }} /✅ 正确const handleClick useCallback(() {}, []) const config useMemo(() ({ a: 1 }), [])二、列表 Key 优化高频坑✅ 正确使用 key❌ 错误list.map((item, index) Item key{index} /)✅ 正确list.map(item Item key{item.id} /)✅ 虚拟列表大数据场景方案万级列表react-window无限滚动react-virtualized三、打包体积优化直接影响首屏1️⃣ 代码分割Code Splitting✅ React.lazyconst About React.lazy(() import(./About)) Suspense fallback{Spin /} About / /Suspense2️⃣ 路由懒加载必做{ path: /dashboard, element: lazy(() import(/pages/Dashboard)) }3️⃣ Tree Shaking✅ 使用 ES Module✅ 避免全量引入❌import_fromlodash✅importdebouncefromlodash/debounce4️⃣ 分析打包体积npmrun build ----report或npx source-map-explorer build/static/js/*.js四、网络 请求优化✅ 请求缓存 / 防抖 / 节流constdebouncedSearchuseDebounce(search,300)✅ 并发请求合并Promise.all([getUser(),getOrders()])✅ 数据缓存推荐工具场景SWR轻量React Query企业级✅ 自动缓存 重试 失效五、组件设计优化✅ 原子化组件Button └─ PrimaryButton └─ DangerButton✅ 受控 / 非受控拆分表单复杂 → 受控弹窗 / 选择器 → 非受控六、Context 性能陷阱❌ 错误AppContext.Provider value{{ user, theme }}✅ 正确ThemeContext.Provider value{theme} AuthContext.Provider value{user}Context 拆分避免全员重渲染七、事件 副作用优化✅ useEffect 依赖要“干净”❌useEffect((){fetchData()},[data])✅useEffect((){fetchData()},[])✅ 清理副作用useEffect((){consttimersetInterval(...)return()clearInterval(timer)},[])八、构建 工程优化项目建议React≥ 18TSstrict modeESLintreact-hooks/rules-of-hooksCI构建缓存CDN静态资源九、用户体验优化感知性能✅ Skeleton 骨架屏✅ 图片懒加载✅ 渐进式加载✅ 错误边界Error BoundaryErrorBoundary fallback{ErrorPage /} App / /ErrorBoundary十、React 18 专项优化强烈推荐特性作用createRoot并发渲染useTransition降低优先级useDeferredValue延迟非关键 UIconst[isPending,startTransition]useTransition()十一、优化优先级实战建议 ✅✅先做这些性价比最高路由懒加载减少不必要 render正确 key请求缓存打包体积分析✅再做这些虚拟列表Context 拆分React Query / SWR十二、一句话总结面试 / 实战通用React 优化的本质减少渲染次数 缩小渲染范围 减小 JS 体积 提升感知速度