理解React的渲染机制：优化的底层逻辑
要做好React优化，先得搞懂它的“做事逻辑”——毕竟优化的本质是“避免做没必要的事”。React的渲染过程分两步：
– Render阶段：组件根据state/props生成虚拟DOM（Virtual DOM），再通过reconciliation（协调）对比新旧虚拟DOM的差异（这一步用的是diff算法）。
– Commit阶段：把差异应用到真实DOM，这一步是同步的，也是性能消耗的关键。
性能问题大多出在不必要的Render阶段触发：比如父组件更新时，子组件没用到变化的props却跟着重新渲染；或者组件的state变了，但依赖的部分没变化，导致整个组件重新生成虚拟DOM。
举个常见的“踩坑”例子：父组件的count变化时，子组件的data对象虽然内容没变，但引用变了，结果子组件跟着重新渲染——控制台会一次次打印“Child rendered”：
// 反例：无意义的子组件渲染
function Parent() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>点我加1</button>
<Child data={{ name: "React" }} /> {/* 每次点击都生成新对象 */}
</div>
);
}
function Child({ data }) {
console.log("Child rendered");
return <div>{data.name}</div>;
}
想优化，就得先让React“知道什么时候不用重新渲染”——这是所有优化技巧的底层逻辑。
避免不必要的重新渲染：useMemo与useCallback的正确姿势
React给了两个“缓存工具”：useMemo（缓存值）和useCallback（缓存函数），但很多人用错了——要么过度使用，要么用在不该用的地方。
该用的时候才用
- 当props是引用类型（对象/数组/函数），且子组件用memo包裹时：用useMemo缓存对象/数组，用useCallback缓存函数。
- 当计算开销很大时：比如复杂的数组排序、大数据量的过滤，用useMemo缓存结果。
正确示例：缓存对象与函数
下面的代码里，子组件只有在name或count变化时才会重新渲染——控制台不会再乱打印了：
// 正例：精准控制渲染时机
const Child = memo(({ data, onHandle }) => {
console.log("Child rendered");
return <button onClick={onHandle}>{data.name}</button>;
});
function Parent() {
const [count, setCount] = useState(0);
const [name, setName] = useState("React");
// 缓存data：只有name变了才重新生成
const data = useMemo(() => ({ name }), [name]);
// 缓存函数：只有count变了才重新生成
const onHandle = useCallback(() => {
console.log("点击了：", count);
}, [count]);
return (
<div>
<button onClick={() => setCount(count + 1)}>改count</button>
<button onClick={() => setName("React优化")}>改name</button>
<Child data={data} onHandle={onHandle} />
</div>
);
}
避坑提醒
- 别用useMemo缓存基本类型（比如字符串、数字）——这会增加额外的计算开销，反而变慢。
- 要是子组件没加memo，useMemo/useCallback没用—— React还是会让子组件重新渲染。
代码拆分与懒加载：从bundle体积到首屏速度的突破
很多React项目首屏加载慢，问题出在bundle太大——所有组件都打包成一个js文件，浏览器得下载完才能渲染。解决办法是代码拆分：把代码分成多个小bundle，按需加载。
React的“懒加载组合拳”：React.lazy + Suspense
React.lazy能让你“动态导入”组件——只有当组件被渲染时，才会加载对应的js文件；Suspense用来处理加载状态（比如显示“加载中”）。
比如一个后台管理系统的“用户设置”页面，只有点击“设置”按钮时才加载：
// 动态导入组件（只有点击时才下载UserSettings.js）
const UserSettings = React.lazy(() => import('./UserSettings'));
function App() {
const [showSettings, setShowSettings] = useState(false);
return (
<div>
<button onClick={() => setShowSettings(true)}>打开设置</button>
{showSettings && (
<Suspense fallback={<div>加载中...</div>}>
<UserSettings />
</Suspense>
)}
</div>
);
}
进阶：路由级拆分
单页应用（SPA）可以把不同路由的组件拆分成单独的bundle——首屏只加载首页的bundle，其他路由的bundle等用户访问时再下载：
// 路由级拆分（用react-router-dom）
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Dashboard = React.lazy(() => import('./Dashboard'));
function App() {
return (
<Router>
<Suspense fallback={<div>加载中...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</Suspense>
</Router>
);
}
这样处理后，首屏加载速度能提升30%~50%——尤其是当项目有很多页面时。
虚拟列表：长列表渲染的性能救星
如果你的项目里有长列表（比如1000+条数据），直接渲染所有item会导致：
– 大量DOM节点占用内存，浏览器变卡；
– 滚动时频繁重排重绘，出现“白屏”或“卡顿”。
解决这个问题的“神器”是虚拟列表：只渲染当前视口内的item，没进入视口的item不渲染——DOM节点数量从1000+变成10+，性能瞬间起飞。
选对库：@tanstack/react-virtual
现在最流行的虚拟列表库是@tanstack/react-virtual（轻量、支持React 18+），下面用它实现一个10000条数据的长列表：
import { useVirtualizer } from '@tanstack/react-virtual';
import { useRef } from 'react';
function VirtualList({ items }) {
const parentRef = useRef(null); // 滚动容器的ref
// 初始化虚拟列表
const virtualizer = useVirtualizer({
count: items.length, // 总数据量
getScrollElement: () => parentRef.current, // 滚动容器
estimateSize: () => 40, // 每个item的预估高度（可根据实际调整）
overscan: 5, // 预加载视口外的5个item，避免滚动白屏
});
return (
<div
ref={parentRef}
style={{
height: '500px', // 固定滚动容器高度
overflow: 'auto',
border: '1px solid #eee',
}}
>
{/* 虚拟列表的“占位容器”，高度等于所有item的总高度 */}
<div
style={{
height: `${virtualizer.getTotalSize()}px`,
position: 'relative',
}}
>
{/* 只渲染视口内的item */}
{virtualizer.getVirtualItems().map((virtualItem) => (
<div
key={virtualItem.key}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
transform: `translateY(${virtualItem.start}px)`, // 定位到正确位置
height: `${virtualItem.size}px`,
padding: '8px',
boxSizing: 'border-box',
}}
>
{items[virtualItem.index]}
</div>
))}
</div>
</div>
);
}
// 使用组件：渲染10000条数据
function App() {
const items = Array.from({ length: 10000 }, (_, i) => `第${i + 1}条数据`);
return <VirtualList items={items} />;
}
试试这个代码——即使滚动很快，也不会卡顿，因为DOM里只有视口内的10几个item。
状态管理的优化：Redux与Context API的性能考量
状态管理是React项目的“心脏”，但用不好会变成“性能包袱”——比如Redux的store变化时，所有订阅的组件都重新渲染；或者Context API的provider变了，所有消费者都跟着变。
Redux的优化技巧
- 用Reselect创建记忆化selector：只有当依赖的state变化时，才重新计算结果。比如下面的代码，selectUserName只会在user变化时重新计算：
import { createSelector } from '@reduxjs/toolkit'; const selectUser = (state) => state.user; const selectUserName = createSelector( [selectUser], (user) => user?.name // 只有user变了才重新计算 ); - 别订阅整个store：组件只订阅需要的state片段，比如用useSelector(selectUserName)而不是useSelector(state => state)。
Context API的优化技巧
Context API是轻量级状态管理的首选，但默认情况下，provider的value变化时，所有消费者都会重新渲染。解决办法是：
– 用memo包裹消费者组件：只有当Context的value变化时才重新渲染。
– 拆分成多个小Context：比如把用户信息和主题分开，避免一个Context变化导致所有组件重新渲染。
举个拆分Context的例子：
// 用户信息Context
const UserContext = createContext();
// 主题Context
const ThemeContext = createContext();
// Provider组件：分开管理两个Context
function AppProvider({ children }) {
const [user, setUser] = useState(null);
const [theme, setTheme] = useState('light');
return (
<UserContext.Provider value={{ user, setUser }}>
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
</UserContext.Provider>
);
}
// 消费者组件：只订阅用户信息
const UserProfile = memo(() => {
const { user } = useContext(UserContext);
return <div>用户名：{user?.name}</div>;
});
// 消费者组件：只订阅主题
const ThemeToggle = memo(() => {
const { theme, setTheme } = useContext(ThemeContext);
return (
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
切换主题（当前：{theme}）
</button>
);
});
这样，当主题变化时，只有ThemeToggle会重新渲染，UserProfile不会受影响——拆分Context能大幅减少不必要的渲染。
原创文章，作者：，如若转载，请注明出处：https://zube.cn/archives/392