【前端分享】关于react的性能优化！

React 的性能优化全面版React 性能优化通常可以分为渲染优化、状态管理优化、组件设计优化、打包优化、网络优化、列表优化、内存优化七大类。一、减少不必要的渲染最重要1. React.memo用于函数组件缓存。const Child React.memo((props) { console.log(Child Render); return div{props.name}/div; });未使用Child nameTom /父组件更新setCount(count 1)Child也会重新渲染。使用后props没变React.memo(Child)不会重新渲染。2. useMemo缓存计算结果。错误const list bigData.filter(item item.age 20);每次render都会执行。优化const list useMemo(() { return bigData.filter(item item.age 20); }, [bigData]);适用•大数据计算•表格数据处理•树结构转换•图表数据处理3. useCallback缓存函数。问题Child onClick{() handleClick()} /每次都会生成新函数。导致React.memo失效。优化const handleClick useCallback(() { console.log(click); }, []); Child onClick{handleClick} /4. useRef代替State错误const [timer,setTimer] useState(null);修改会触发渲染。优化const timerRef useRef(null); timerRef.current setTimeout(...)不会触发render。适合•定时器•DOM•websocket实例•缓存变量二、列表性能优化大项目最容易卡顿的地方。5. key不要乱写错误{ list.map((item,index)( Item key{index}/ )) }删除数据后[1,2,3,4]变[2,3,4]React会重新比较大量节点。正确Item key{item.id}/6. 虚拟列表10000条数据list.map(...)直接卡死。使用•react-window•react-virtualizedFixedSizeList height{600} itemCount{10000} itemSize{50} 只渲染可视区域。7. 分页加载不推荐一次加载10000条推荐每页20条或者无限滚动三、状态管理优化8. 状态不要放太高错误App ├─A ├─B ├─C所有状态放App更新一次App重新render所有子组件更新。优化状态下沉A自己维护state只更新A。9. Context拆分错误UserContext.Provider value{{ user, theme, language }} 修改themeuser组件也更新优化UserContext ThemeContext LanguageContext拆分Context。10. Zustand替代复杂Context大型项目推荐Zustand 官方网站const count useStore(state state.count)按需订阅。避免全局刷新。四、组件设计优化11. 组件拆分错误Page.jsx 2000行代码任何状态变化整个页面render优化Page ├ Header ├ Search ├ Table └ Footer细粒度更新。12. 懒加载组件const ReportPage React.lazy(() import(./ReportPage) );Suspense fallback{Loading/} ReportPage / /Suspense13. 路由懒加载const Home lazy(() import(./Home));减少首屏体积。14. 条件渲染优化错误{ show BigTable / }频繁卸载挂载。优化div style{{ display: show ? block : none }} BigTable / /div适用于频繁切换场景。五、表格性能优化企业项目重点你做过性能平台项目这部分面试经常问。15. 表格列配置缓存错误const columns [ ... ]每次render重新创建。优化const columns useMemo(() [ ... ], []);16. render函数缓存错误{ render: () ( Button编辑/Button ) }优化const renderAction useCallback( (record){}, [] );17. 大表格虚拟滚动Ant DesignTable scroll{{ y:600 }} virtual /18. Echarts销毁优化页面切换chart.dispose();避免内存泄漏。六、请求性能优化19. 防抖debounce搜索框lodash.debounceconst search debounce(() { api(); },500);20. 节流throttle滚动事件lodash.throttleconst scroll throttle((){ },300);21. 请求缓存react-query现在叫TanStack Query 官方网站useQuery(...)自动缓存。22. 请求合并错误getUser() getRole() getDept()优化Promise.all([ getUser(), getRole(), getDept() ])七、打包优化23. Tree Shaking错误import _ from lodash;优化import debounce from lodash/debounce;24. Code Splittingimport()动态加载。25. Gzip/Brotli压缩服务器开启gzip on;brotli on;26. CDN资源react.min.js走CDN。27. 图片优化使用•WebP•AVIF懒加载img loadinglazy /八、React18优化28. useTransition降低优先级更新。const [isPending,startTransition] useTransition(); startTransition((){ setList(data); });适合•搜索•大列表29. useDeferredValueconst deferredKeyword useDeferredValue(keyword);输入不卡顿。九、内存泄漏优化30. 清理事件useEffect((){ window.addEventListener(...); return (){ window.removeEventListener(...); }; },[]);31. 清理定时器useEffect((){ const timer setInterval(...); return (){ clearInterval(timer); }; },[]);32. 取消请求const controller new AbortController(); fetch(url,{ signal:controller.signal }); return (){ controller.abort(); }十、React项目面试必答性能优化方案如果面试官问React项目做过哪些性能优化可以按这个顺序回答1、React.memo减少子组件渲染2、useMemo缓存复杂计算3、useCallback缓存函数4、状态下沉避免全局刷新5、Context拆分或使用Zustand6、表格列配置useMemo缓存7、大数据列表使用虚拟滚动8、搜索使用防抖9、路由和组件懒加载10、Tree Shaking Code Splitting11、React18 useTransition优化大列表12、清理事件、定时器、防止内存泄漏对于你目前做过的云鉴性能平台React Ant Design ECharts最有价值、最容易写进简历的优化点是•表格虚拟滚动千级数据•columns/useMemo缓存•搜索条件防抖•ECharts按需渲染与dispose销毁•React.memo组件级缓存•路由懒加载•Promise.all接口并发•Zustand/Redux选择性订阅•React Query缓存接口数据•React18 useTransition优化搜索结果渲染·······END·······喜欢的话可以点个赞关注博主哦