当前位置：首页 > news >正文

React18中性能优化方式

news 2025/9/19 5:45:48

一、常规 React 性能优化策略

1. 使用 React.memo 避免不必要的重新渲染

对纯展示型子组件使用 React.memo，避免父组件更新导致子组件无意义的重渲染。

const MyComponent = React.memo(function MyComponent(props) {/* 使用 props 渲染 */
});

⚠️ 注意：只在 props 真正不变或变化不频繁时使用，避免滥用，因为比较 props 也有开销。

2. 合理使用 useMemo 和 useCallback

useMemo：缓存计算结果，避免每次渲染都重新计算。
useCallback：缓存函数引用，避免子组件因函数引用变化而重渲染。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const handleClick = useCallback(() => doSomething(id), [id]);

但不要过早优化，只有在性能确实成为瓶颈时才使用。

3. 避免在渲染中直接进行复杂计算或副作用

将复杂计算移到 useMemo或事件处理函数中，副作用放到 useEffect中。

4. 组件拆分 & 粒度控制

将大组件拆分为多个小组件，有助于：

更精确地控制重新渲染范围

提升代码可维护性

结合 React.memo更有效地优化

5、列表渲染优化

正确使用key：确保列表项有稳定唯一的key，避免使用索引作为key

虚拟列表：对于长列表，使用react-window或react-virtualized只渲染可视区域内容

import { FixedSizeList } from 'react-window';const LongList = ({ items }) => (<FixedSizeListheight={500}width="100%"itemCount={items.length}itemSize={50}>{({ index, style }) => (<div style={style} key={items[index].id}>{items[index].content}</div>)}</FixedSizeList>
);

6、资源加载优化

代码分割与懒加载：使用React.lazy和suspense按需加载组件

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));const App = () => (<Suspense fallback={<Spinner />}><HeavyComponent /></Suspense>
);