7 个 React 性能优化技巧，让你的应用快如闪电
摘要
React 性能优化不是玄学，是实打实的技术活。本文分享 7 个亲测有效的优化技巧，涵盖渲染优化、状态管理、代码分割等核心场景。每个技巧都附带真实代码对比，帮你避开 90% 的性能陷阱。
开篇引入
上周接到一个线上性能告警，用户反馈页面卡顿严重。
打开 Performance 面板一看，主线程被渲染任务占得满满当当，FPS 跌到个位数。
说实话，这种场景太常见了。很多开发者写 React 只关注功能实现，性能问题等到上线才发现。但那时候再优化，成本已经翻了几倍。
我踩过最大的坑就是：以为用了 React 就自动高性能。
实际上，不当的使用方式能让 React 比 jQuery 还慢。
今天分享的 7 个技巧，都是我在真实项目里验证过的。不玩虚的，直接上代码看效果。
核心技巧
技巧一：用 React.memo 避免不必要的重渲染
React 默认行为是父组件重渲染时，所有子组件跟着重渲染。哪怕子组件的 props 根本没变。
问题代码：
function Parent() { const [count, setCount] = useState(0); return ( <div> <button onClick={() => setCount(c => c + 1)}>Count: {count}</button> <Child /> {/* 每次 count 变化都会重渲染 */} </div> ); } function Child() { console.log('Child rendered'); return<div>Static content</div>; }优化方案：
// ✅ 优化后 const Child = React.memo(() => { console.log('Child rendered'); return <div>Static content</div>; });亲测效果：在复杂页面里，这个改动能减少 60% 以上的无用渲染。
但要注意，React.memo 不是银弹。浅比较 props 本身有开销，如果组件本身很轻量，加 memo 反而更慢。
技巧二：useCallback 和 useMemo 的正确用法
这两个 Hook 经常被滥用。我见过太多人给每个函数都包 useCallback，结果性能没提升，代码可读性大打折扣。
使用原则：
只有当函数作为依赖传给子组件时，才需要 useCallback
只有当计算结果会被重复使用时，才需要 useMemo
// ❌ 过度优化 const handleClick = useCallback(() => { doSomething(); }, []); // ✅ 合理使用 const handleClick = useCallback(() => { doSomething(); }, [dependency]); // 依赖变化时才重新创建 const expensiveValue = useMemo(() => { return computeExpensiveValue(a, b); }, [a, b]); // 只有 a 或 b 变化时才重新计算性能对比数据：
在一个列表渲染场景中，合理使用 useCallback 后，列表项的渲染时间从 45ms 降到 12ms。
技巧三：虚拟列表处理大数据
当列表项超过 100 条时，直接渲染会让页面卡到怀疑人生。
虚拟列表原理：只渲染可视区域内的元素，其他用占位符代替。
代码实现：
import { FixedSizeList } from 'react-window'; function VirtualList({ items }) { return ( <FixedSizeList height={600} itemCount={items.length} itemSize={50} width="100%" > {({ index, style }) => ( <div style={style}> {items[index].name} </div> )} </FixedSizeList> ); }实际效果：
10000 条数据，传统渲染需要 3 秒+，虚拟列表控制在 100ms 以内。性能提升 30 倍。
技巧四：代码分割 + 懒加载
首屏加载慢是用户流失的主要原因。把不重要的代码拆出去，按需加载。
优化前：
import Dashboard from './Dashboard'; import Settings from './Settings'; import Reports from './Reports';优化后：
const Dashboard = lazy(() => import('./Dashboard')); const Settings = lazy(() => import('./Settings')); const Reports = lazy(() => import('./Reports')); function App() { return ( <Suspense fallback={<Loading />}> <Dashboard /> </Suspense> ); }打包体积对比：
优化前：2.3MB 优化后：首屏 450KB，其他按需加载
首屏加载时间从 3.2s 降到 0.8s。
技巧五：避免内联对象和函数
这个坑我踩了至少 10 次。内联对象和函数会让 React.memo 失效。
问题代码：
function Parent() { return <Child style={{ color: 'red' }} />; } // 每次渲染都创建新对象，Child 会重渲染优化方案：
const style = { color: 'red' }; function Parent() { return <Child style={style} />; }或者用useMemo：
const style = useMemo(() => ({ color: 'red' }), []);技巧六：使用生产模式 + 性能分析工具
开发模式的 React 包含大量调试代码，性能比生产模式慢 3-5 倍。
部署前必做：
# 构建生产版本 npm run build # 使用性能分析 import { Profiler } from 'react'; <Profiler id="App" onRender={onRenderCallback}> <App /> </Profiler> function onRenderCallback(id, phase, actualDuration) { console.log(`${id} 渲染耗时：${actualDuration}ms`); }Chrome DevTools 的 React 开发者工具是必备神器，能精准定位渲染瓶颈。
技巧七：状态管理优化
全局状态不是越多越好。Redux/Zustand 用不好，性能灾难。
优化策略：
状态粒度细化，避免大对象
使用选择器只订阅需要的数据
考虑局部状态代替全局状态
问题代码：
const store = useStore(); // 整个 store 变化都会触发重渲染优化后：
const user = useStore(state => state.user); const settings = useStore(state => state.settings);技术选型建议
不同场景的优化优先级：
场景 | 优先优化点 |
|---|---|
数据列表 | 虚拟列表 + 分页 |
表单页面 | 受控组件优化 + 防抖 |
仪表盘 | 代码分割 + 懒加载 |
实时应用 | 状态管理优化 + memo |
决策清单：
[ ] 列表超过 50 条？→ 虚拟列表
[ ] 首屏加载>2s？→ 代码分割
[ ] 频繁重渲染？→ React.memo + useCallback
[ ] 包体积>1MB？→ 按需加载 + Tree Shaking
踩坑经验
坑 1：滥用 useMemo/useCallback
这两个 Hook 本身有开销。只有当计算成本高或需要稳定引用时才用。
调试技巧：
用 React Profiler 看actualDuration，如果优化后反而变慢，就撤掉。
坑 2：忽略 key 的重要性
列表渲染不用 key 或用 index 当 key，会导致不必要的重渲染。
错误写法：
items.map((item, index) => <Item key={index} />)正确写法：
items.map(item => <Item key={item.id} />)坑 3：过度优化
性能优化要基于数据，不要凭感觉。
正确做法：先用 Performance 面板定位瓶颈，再针对性优化。
结尾
性能优化不是一蹴而就，是持续的过程。
最好的优化时机是写代码的时候，而不是上线之后。
这 7 个技巧，建议你收藏起来，下次遇到性能问题时对照检查。
你遇到过最棘手的 React 性能问题是什么？评论区聊聊，我帮你一起分析。