react性能优化

React 性能优化全面指南

React 应用性能优化是一个系统工程,需要从多个层面进行优化。以下是一套完整的 React 性能优化策略,涵盖从基础到高级的各种技术:

一、组件级优化策略

1. 记忆化组件

  • React.memo :避免不必要的重新渲染

    jsx 复制代码
    const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
      return prevProps.id === nextProps.id;
    });

2. 状态精细化

  • 避免在根组件存储所有状态

  • 将状态下放到使用它的最小组件

    jsx 复制代码
    // 不好的做法:状态提升过高
    const App = () => {
      const [user, setUser] = useState({});
      return <Profile user={user} />;
    };
    
    // 好的做法:状态下沉
    const Profile = () => {
      const [user, setUser] = useState({});
      return <UserCard user={user} />;
    };

3. 引用类型优化

  • useCallback:缓存函数引用

    jsx 复制代码
    const handleClick = useCallback(() => {
      console.log('Clicked');
    }, []);
  • useMemo:缓存计算结果

    jsx 复制代码
    const expensiveValue = useMemo(() => {
      return computeExpensiveValue(a, b);
    }, [a, b]);

4. 避免内联对象

  • 内联对象会导致每次渲染都创建新引用

    jsx 复制代码
    // 不好的做法
    <MyComponent style={{ color: 'red' }} />
    
    // 好的做法
    const style = useMemo(() => ({ color: 'red' }), []);
    <MyComponent style={style} />

二、渲染优化策略

1. 虚拟化长列表

  • 使用 react-windowreact-virtualized

    jsx 复制代码
    import { FixedSizeList as List } from 'react-window';
    
    const Row = ({ index, style }) => (
      <div style={style}>Row {index}</div>
    );
    
    const VirtualList = () => (
      <List height={600} itemCount={1000} itemSize={35} width={300}>
        {Row}
      </List>
    );

2. 延迟加载组件

  • React.lazy + Suspense

    jsx 复制代码
    const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
    
    const App = () => (
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    );

3. 分片渲染

  • 使用 setTimeoutrequestIdleCallback 拆分渲染任务

    jsx 复制代码
    const renderChunk = (startIndex, endIndex) => {
      requestIdleCallback(() => {
        // 渲染部分内容
        for (let i = startIndex; i < endIndex; i++) {
          renderItem(data[i]);
        }
      });
    };

三、状态管理优化

1. 状态选择器优化

  • 在 Redux 中使用 reselect

    jsx 复制代码
    import { createSelector } from 'reselect';
    
    const selectItems = state => state.items;
    const selectFilter = state => state.filter;
    
    const selectFilteredItems = createSelector(
      [selectItems, selectFilter],
      (items, filter) => items.filter(item => item.includes(filter))
    );

2. Context 优化

  • 拆分 Context 避免不必要更新

    jsx 复制代码
    // 创建多个 Context
    const UserContext = createContext();
    const ThemeContext = createContext();
    
    // 使用 Context Selector
    import { useContextSelector } from 'use-context-selector';
    
    const UserName = () => {
      const name = useContextSelector(UserContext, v => v.name);
      return <div>{name}</div>;
    };

3. 状态更新批处理

  • React 18 自动批处理异步操作

  • 手动批处理(React 17 及以下)

    jsx 复制代码
    // React 17 需要手动批处理
    import { unstable_batchedUpdates } from 'react-dom';
    
    const clickHandler = () => {
      setTimeout(() => { // 模拟异步
        ReactDOM.unstable_batchedUpdates(() => { // 仅仅加了unstable_batchedUpdates
          // 这里的两个setState会合并执行一次。
          setNum(2); 
          setStr('c');
        });
      }, 1000);
    }

四、网络与加载优化

1. 资源预加载

  • 使用 preloadprefetch

    html 复制代码
    <link rel="preload" href="critical.css" as="style">
    <link rel="prefetch" href="optional.js" as="script">

2. 代码分割

  • 基于路由的代码分割

    jsx 复制代码
    const Home = lazy(() => import('./Home'));
    const About = lazy(() => import('./About'));
    
    const App = () => (
      <Routes>
        <Route path="/" element={<Suspense fallback="..."><Home /></Suspense>} />
        <Route path="/about" element={<Suspense fallback="..."><About /></Suspense>} />
      </Routes>
    );

3. 图片优化

  • 使用 next/image (Next.js)或 react-lazy-load-image

    jsx 复制代码
    import { LazyLoadImage } from 'react-lazy-load-image-component';
    
    <LazyLoadImage
      src="image.jpg"
      placeholderSrc="placeholder.jpg"
      effect="blur"
    />

六、性能监测与分析工具

1. React DevTools

  • 组件渲染时间分析
  • Highlight updates when components render

2. Chrome Performance 工具

  • 录制性能时间线
  • 分析 JavaScript 执行时间

3. React Profiler API

  • 编程式性能分析

    jsx 复制代码
    <Profiler id="MyApp" onRender={onRenderCallback}>
      <App />
    </Profiler>
    
    function onRenderCallback(
      id, // 组件ID
      phase, // "mount" 或 "update"
      actualDuration, // 本次渲染花费时间
      baseDuration, // 不使用memoization的估计时间
      startTime, // 开始时间
      commitTime, // 提交时间
      interactions // 本次更新相关的交互
    ) {
      // 记录或分析这些信息
    }

4. Lighthouse 审计

  • 全面的性能评分
  • 优化建议

七、常见性能陷阱及解决方案

问题 表现 解决方案
过度渲染 组件频繁重渲染 使用 React.memo, useMemo
长列表性能差 滚动卡顿 虚拟化列表
首屏加载慢 LCP 时间过长 代码分割, 预加载
JavaScript 阻塞 TTI 延迟 代码分割, 懒加载
状态管理不当 无关组件更新 精细化状态管理

通过综合应用这些优化策略,可以显著提升 React 应用的性能,提供更流畅的用户体验。记住,优化是一个持续的过程,需要根据应用的具体情况进行调整和迭代。

相关推荐
ZzMemory17 分钟前
JavaScript 类数组:披着数组外衣的 “伪装者”?
前端·javascript·面试
小高00732 分钟前
🌐AST(抽象语法树):前端开发的“代码编译器”
前端·javascript·面试
GIS瞧葩菜35 分钟前
Cesium 中拾取 3DTiles 交点坐标
前端·javascript·cesium
Allen Bright35 分钟前
【JS-7-ajax】AJAX技术:现代Web开发的异步通信核心
前端·javascript·ajax
轻语呢喃40 分钟前
Mock : 没有后端也能玩的虚拟数据
前端·javascript·react.js
嘉琪0011 小时前
2025——js面试题(9)——开发环境相关
开发语言·javascript·ecmascript
薛定谔的算法1 小时前
React 项目骨架把“一万行灾难”拆成“百来个各司其职的小文件”
前端·react.js·前端框架
拉不动的猪1 小时前
JS篇之性能优化
前端·javascript·面试
cainiao0806052 小时前
2025版React 20新特性深度解析:全栈革命的终极形态
前端·react.js·前端框架
用户97514281500212 小时前
对js原型和原型链的理解
javascript