react.js怎样提升渲染性能

在 React 中提升渲染性能，核心思路是 减少不必要的渲染、降低渲染成本、合理使用并发与缓存。下面按「常见手段 → 原理 → 示例」的方式系统总结。

一、减少不必要的渲染

1. 使用 React.memo

避免父组件更新导致子组件无谓渲染。

const Child = React.memo(function Child({ value }) {
  return <div>{value}</div>;
});

✅ 适合：纯展示组件
❌ 不适合：props 经常变化（对象/函数）

2. 使用 useMemo / useCallback

避免每次渲染都创建新对象或函数。

const data = useMemo(() => heavyCompute(), [dep]);
const onClick = useCallback(() => {}, [dep]);

⚠️ 不要滥用，简单计算反而更慢。

3. 拆分组件（细粒度渲染）

大组件一变全变，拆小组件只变局部。

function List({ items }) {
  return items.map(i => <Item key={i.id} item={i} />);
}

4. 使用 key 正确

错误 key 会导致重建 DOM。

✅ 用稳定 id
❌ 用 index（列表会乱）

二、列表与大数据渲染优化

5. 虚拟列表（Virtual List）

只渲染可视区域。

• react-window
• react-virtualized
• @tanstack/react-virtual

import { FixedSizeList } from 'react-window';

✅ 万级数据必备

6. 分页 / 懒加载

• 分页
• 无限滚动
• IntersectionObserver

三、状态管理优化

7. 状态下放（避免全局重渲染）

// ❌ 全局 state 一变全变
// ✅ 局部 state

8. 使用 Zustand / Jotai / Recoil

比 Redux 更细粒度更新。

const count = useStore(s => s.count);

四、并发与调度优化（React 18+）

9. 使用 startTransition

非紧急更新不阻塞 UI。

startTransition(() => {
  setHeavyState(next);
});

10. useDeferredValue

延迟不重要的值。

const deferred = useDeferredValue(value);

五、渲染成本控制

11. 避免在 render 中做重计算

• 网络请求 ❌
• 大循环 ❌
• JSON.parse ❌

12. 使用 useLayoutEffect 谨慎

useLayoutEffect 同步阻塞渲染。

六、构建与加载优化

13. 代码分割

const Page = React.lazy(() => import('./Page'));

14. Tree Shaking

• ES Module
• 不引入整个库

七、调试工具

• React DevTools → Profiler
• why-did-you-render
• Chrome Performance

总结一句话

React 性能优化 = 让该渲染的渲染，不该渲染的别渲染。

如果你有具体场景（表单 / 表格 / 大列表 / 后台系统），我可以给你更针对性的方案。