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 应用的性能,提供更流畅的用户体验。记住,优化是一个持续的过程,需要根据应用的具体情况进行调整和迭代。

相关推荐
武子康3 小时前
Java-109 深入浅出 MySQL MHA主从故障切换机制详解 高可用终极方案
java·数据库·后端·mysql·性能优化·架构·系统架构
luquinn4 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
烛阴4 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
啃火龙果的兔子5 小时前
js获取html元素并设置高度为100vh-键盘高度
javascript·html·计算机外设
天天进步20157 小时前
从零到一:现代化充电桩App的React前端参考
前端·react.js·前端框架
柯南二号7 小时前
【大前端】React Native Flex 布局详解
前端·react native·react.js
_Kayo_8 小时前
React 学习笔记2 props、refs
笔记·学习·react.js
wifi歪f9 小时前
🎉 Stenciljs,一个Web Components框架新体验
前端·javascript
不爱说话郭德纲10 小时前
👩‍💼产品姐一句小优化,让我给上百个列表加上一个动态实时计算高度的方法😿😿
前端·vue.js·性能优化
知识分享小能手10 小时前
React学习教程,从入门到精通, React教程:构建你的第一个 React 应用(1)
前端·javascript·vue.js·学习·react.js·ajax·前端框架