React 性能优化-星耀云-星耀云

一、前言

搞过React项目的人都知道，最烦的是用户反馈"页面卡"、"点击没反应"、"内存越用越大"。线上跑一段时间就开始卡，排查半天发现是组件重复渲染、大的列表没做虚拟滚动、bundle肥得跟猪一样。这篇不废话，直接讲怎么用Profiler找问题、用 memo/useCallback 卡住不必要的渲染、用懒加载砍掉首屏体积，看完就能动手优化。

二、操作步骤

步骤1：打开React DevTools Profiler定位卡顿源头

性能优化第一步永远是定位瓶颈，别TM上来就优化，先证明哪里慢。

# 开发环境启动（React 18+） npm start # 浏览器安装 React DevTools 插件 # Chrome Web Store搜索 "React Developer Tools" # 打开DevTools -> Profiler tab -> 点击录制 -> 操作页面 -> 停止 # 预期输出会显示： # - 组件渲染耗时（橙色柱状） # - 渲染频率（一个组件渲染多少次） # - 每个渲染的"为什么渲染"原因

关键看两个指标：Render duration（越红越长越烂）和 Render count（渲染次数超过5次的组件必有坑）。找到那个渲染几十次的组件，恭喜你找到了问题源头。

完成这步之后，就简单了

步骤2：用React.memo包裹高频渲染的组件

确认问题组件后，用memo卡住不必要的重渲染。这是React官方给的性能神器。

# 修改前 - 组件每次父组件渲染都会跟着渲染 function UserList({ users }) { console.log('UserList rendered'); return ( <ul> {users.map(u => <li key={u.id}>{u.name}</li>)} </ul> ); } // 修改后 - props没变化就不重渲染 const UserList = React.memo(function UserList({ users }) { console.log('UserList rendered'); return ( <ul> {users.map(u => <li key={u.id}>{u.name}</li>)} </ul> ); }); // 使用方式不变 <UserList users={userList} />

预期效果：控制台里UserList rendered只出现一次，后续父组件再渲染它也不会动。

别急，好戏还在后头

步骤3：用useMemo缓存计算结果，防止重复计算

组件里有复杂计算？每次渲染都跑一遍？不用的，数据没变就拿缓存。

import { useMemo } from 'react'; function Dashboard({ data, filter }) { // 只有data或filter变化时才重新计算，否则复用缓存 const filteredData = useMemo(() => { console.log('Calculating filtered data...'); return data.filter(item => item.category === filter); }, [data, filter]); // 依赖数组，变了才重算 // 复杂计算 const stats = useMemo(() => { return { total: filteredData.length, average: filteredData.reduce((sum, i) => sum + i.value, 0) / filteredData.length, }; }, [filteredData]); return ( <div> <div>Total: {stats.total}</div> <div>Average: {stats.average.toFixed(2)}</div> </div> ); }

预期输出：首次渲染打印"Calculating filtered data..."，后续只要依赖没变，这块代码根本不会跑。

这一步搞定了，我们继续

步骤4：用useCallback稳定回调函数引用

子组件memo了但还是重渲染？问题在回调函数每次都是新引用。

import { useCallback } from 'react'; function ParentComponent() { const [count, setCount] = useState(0); // 之前 - 每次渲染都是新函数，子组件memo白做 // const handleClick = () => console.log('clicked'); // 之后 - 稳定引用，依赖没变就返回同一个函数 const handleClick = useCallback(() => { console.log('clicked', count); }, [count]); // count变了才创建新函数 const handleSubmit = useCallback((data) => { // 复杂逻辑 doSomething(data); setCount(c => c + 1); }, []); // 不依赖任何状态就写空数组，永久稳定 return ( <> <MemoizedButton onClick={handleClick} /> <MemoizedForm onSubmit={handleSubmit} /> </> ); }

配合React.memo使用，预期效果：父组件渲染时，子组件不再跟着一起渲染。

完成这步之后，就简单了

步骤5：大列表用虚拟滚动替代一次性渲染

列表超过100条还直接map渲染？不卡才怪。用虚拟滚动只渲染可见区域。

# 安装虚拟滚动库 npm install react-window # 代码实现 import { FixedSizeList } from 'react-window'; function VirtualList({ items }) { const Row = ({ index, style }) => ( <div style={style} className="list-item"> {items[index].name} - {items[index].email} </div> ); return ( <FixedSizeList height={600} // 列表可视区域高度 itemCount={items.length} // 总条目数 itemSize={50} // 每行高度 width="100%" > {Row} </FixedSizeList> ); } // 对比效果： // 直接渲染10000条：DOM节点10000+，滚动卡成狗 // 虚拟滚动：DOM节点约20个（可视区域），丝滑流畅

预期效果：10000条数据的列表，内存占用从几百MB降到几十MB，滚动帧率从10fps提到60fps。

搞完这步，离成功就不远了

步骤6：路由级代码分割减少首屏体积

整个应用打包成一个bundle？首屏加载慢成PPT。用懒加载分割代码。

import React, { Suspense, lazy } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; // 之前 - 同步导入，所有代码打包到一个chunk // import Dashboard from './pages/Dashboard'; // import Settings from './pages/Settings'; // 之后 - 按需加载，每个路由单独打包 const Dashboard = lazy(() => import('./pages/Dashboard')); const Settings = lazy(() => import('./pages/Settings')); const Analytics = lazy(() => import('./pages/Analytics')); function App() { return ( <BrowserRouter> <Suspense fallback={<div>Loading...</div>}> <Routes> <Route path="/" element={<Dashboard />} /> <Route path="/settings" element={<Settings />} /> <Route path="/analytics" element={<Analytics />} /> </Routes> </Suspense> </BrowserRouter> ); } // 构建后生成多个chunk： // main.js - 基础框架代码 // Dashboard.js - 用户首次访问就加载 // Settings.js - 访问该路由时才加载 // Analytics.js - 访问该路由时才加载

预期输出：Network面板看到多个小chunk文件，首屏加载体积减少50%以上。

完成这步之后，就简单了

步骤7：生产环境构建优化与监控

开发环境快不算快，生产环境才是检验真理的时刻。

# 修改package.json添加生产构建命令 # { # "scripts": { # "build": "NODE_ENV=production webpack --mode production" # } # } # 执行生产构建 npm run build # 预期输出： # Asset Size Chunks Chunk Names # main.js 142KB [0] main # vendor.js 89KB [1] vendor # Settings.js 23KB [2] Settings # Analytics.js 18KB [3] Analytics # 分析bundle组成（安装webpack-bundle-analyzer） npm install --save-dev webpack-bundle-analyzer # webpack.config.js中添加： const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] }; # 重新构建会自动打开可视化分析页面 # 看到哪个库体积大就考虑替换或按需引入

关键指标：首屏JS不超过200KB（gzipped），懒加载的chunk不超过100KB。

三、常见问题FAQ

Q：memo了组件还是重渲染怎么回事？

别TM以为memo是万能的。有几个原因会导致失效：第一，props里传了新的对象或数组，即使内容一样引用也不一样；第二，父组件用了inline style或者随机key；第三，可能你传了函数但没用useCallback稳定引用。打开DevTools看这个组件的"为什么渲染"，红色高亮的就是元凶。终极方案是React.memo第二个参数写自定义比较函数，精确控制什么情况算"变了"。

Q：useMemo和useCallback到底用哪个？

简单记：useMemo是用来缓存计算结果的，useCallback是用来缓存函数引用的。useMemo(fn, deps) 等价于 useCallback(()=>fn(), deps)。实际场景中，useCallback更常用，因为子组件需要稳定回调函数引用才能触发memo的优化效果。如果你只是不想重复计算某个值，就用useMemo。记住两个都不要滥用，依赖数组写错了会导致bug更难排查。

Q：虚拟滚动和懒加载都上了还是卡怎么办？

那就得用Web Workers把计算密集型任务丢到后台线程。React社区有个神器叫react-window配合react-virtualized-auto-sizer，可以处理更复杂的场景。还有个偏方是考虑用更轻量的方案替代，比如Preact或者把React换成SolidJS，性能能提升几倍。但正常业务场景，做到我说的这7步，90%的性能问题都能解决，别TM上来就换框架。

四、总结

React性能优化核心就三点：减少渲染次数、降低渲染成本、减少首屏加载量。

工具层面：DevTools Profiler定位瓶颈 → memo卡住重渲染 → useMemo/useCallback稳定引用 → 虚拟滚动处理大列表 → 代码分割减少体积 → 生产构建验证效果。

避坑指南：别过早优化，先证明哪里慢；别以为memo万能，props引用问题更隐蔽；依赖数组写错是bug重灾区；虚拟滚动不是万能药，列表不超500条用不用无所谓。

进阶方向：Web Workers做后台计算、Service Worker做离线缓存、Web Vitals监控真实用户体验、React Server Components做服务端渲染优化。

延伸阅读：

React官方文档 - Profiler：https://react.dev/reference/react/Profiler
React.memo源码解析：理解浅比较的实现机制
webpack-bundle-analyzer：可视化分析bundle组成的必备工具
React 18 Concurrent Features：新的startTransition和useDeferredValue在性能优化中的应用

服务公告

React 性能优化-星耀云

发布时间:2026-04-28 12:02

一、前言

二、操作步骤

步骤1：打开React DevTools Profiler定位卡顿源头

步骤2：用React.memo包裹高频渲染的组件

步骤3：用useMemo缓存计算结果，防止重复计算

步骤4：用useCallback稳定回调函数引用

步骤5：大列表用虚拟滚动替代一次性渲染

步骤6：路由级代码分割减少首屏体积

步骤7：生产环境构建优化与监控

三、常见问题FAQ

四、总结

相关推荐