从卡顿到丝滑：React应用的5步极速优化指南

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

React.js允许我们构建动态和交互式的Web应用程序。然而，实现顶级性能可能是一个挑战，特别是在处理大型数据集或复杂组件时。

让我们来看看如何优化你的React应用程序以获得最佳性能！

1. 减少不必要的渲染

构建React应用程序时，优化性能至关重要。一个关键方面是最小化组件重新渲染的次数。不必要的重新渲染可能导致用户体验迟缓并影响整体响应性。

import React, { memo } from 'react';

const ComponentB = memo((props) => {
  return <div>{props.propB}</div>;
});

通过用memo()包装ComponentB，只有当propB实际改变值时它才会重新渲染，无论其父组件重新渲染多少次。

useCallback()是一个记忆回调函数的钩子。当将回调作为 props 传递给子组件时，它特别有用。

import React, { useCallback } from 'react';

const ParentComponent = () => {
  const handleButtonClick = useCallback(() => {
    // 处理按钮点击逻辑
  }, []);

  return <ChildComponent onClick={handleButtonClick} />;
};

通过使用useCallback()，可以确保回调函数在渲染之间保持不变，除非其依赖项发生变化。

在使用React.memo()和useCallback()等技术优化性能时，保持平衡很重要。记忆化（比较旧的和新的props）对于大型props或当传递React组件作为props时可能会消耗资源。

2. 使用代码分割进行懒加载

懒加载和代码分割是通过只加载必要的组件并将代码分割成更小的包来优化React应用程序性能的技术，从而减少初始加载时间。

懒加载可以使用react模块中的Suspense组件和lazy函数来实现。lazy函数允许我们定义一个将在需要时懒加载的组件。

这里有一个例子：

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

在这个例子中，LazyComponent 只有在需要时才会被加载并在Suspense组件内显示。fallback prop用于指定组件加载时显示的内容。

代码分割可以通过动态导入来实现，这允许我们将代码分割成更小的包，可以按需加载。这里有一个例子：

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <button onClick={() => import('./AnotherLazyComponent')
          .then((module) => {
            const AnotherLazyComponent = module.AnotherLazyComponent;
            setComponent(<AnotherLazyComponent />);
          })}>
          加载另一个懒加载组件
        </button>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

在这个例子中，AnotherLazyComponent在按钮被点击时动态加载，允许您将代码分割成更小的包并减少初始加载时间。

通过使用懒加载和代码分割，您可以确保您的应用程序只加载必要的组件和代码，从而减少初始加载时间并提高整体性能。

3. 防抖和节流

防抖和节流是用来控制函数调用频率的技术。防抖确保一个函数在给定的时间段内只被调用一次，而节流确保一个函数在给定的时间段内最多被调用一次。这些技术可以用来提高React应用程序的性能，特别是在处理可能触发昂贵计算或网络请求的用户输入时。

让我们从防抖开始。想象一下，您的React应用程序中有一个搜索栏，每当用户输入一个字符时就向服务器发送一个网络请求。这可能会导致大量不必要的请求并减慢应用程序。为了避免这种情况，您可以使用防抖来确保只有在用户停止输入一定时间后才发送网络请求。

这里是一个如何在React组件中使用lodash的debounce函数来实现防抖的例子：

import React, { useState } from 'react';
import debounce from 'lodash.debounce';

function SearchBar() {
  const [query, setQuery] = useState('');

  // 防抖搜索函数，确保它只在用户停止输入500ms后被调用一次
  const debouncedSearch = debounce(query => {
    // 发送网络请求搜索查询
    console.log(`Searching for: ${query}`);
  }, 500);

  const handleQueryChange = event => {
    const newQuery = event.target.value;
    setQuery(newQuery);
    debouncedSearch(newQuery);
  };

  return (
    <input type="text" value={query} onChange={handleQueryChange} />
  );
}

在这个例子中，每当用户在搜索栏中输入一个字符时，handleQueryChange函数就会被调用。然而，我们不是直接调用 debouncedSearch 函数，而是将其传递给 debounce 函数，以确保它只在用户停止输入500ms后被调用一次。

现在让我们讨论节流。当我们想要限制函数被调用的频率时，即使它在短时间内被多次调用，节流可能会很有用。例如，我们可能想要将滚动事件限制在100ms以避免压倒浏览器的事件循环。

这里是一个如何在React组件中使用lodash的throttle函数来实现节流的例子：

import React from 'react';
import throttle from 'lodash.throttle';

function ScrollComponent() {
  const [scrollTop, setScrollTop] = useState(0);

  // 节流滚动函数，确保它每100ms只被调用一次，
  // 即使用户在该期间多次滚动
  const throttledScroll = throttle(() => {
    // 用当前滚动位置更新scrollTop状态
    setScrollTop(window.pageYOffset);
  }, 100);

  const handleScroll = () => {
    throttledScroll();
  };

  return (
    <div onScroll={handleScroll} style={{ height: '500vh' }}>
      <p>向下滚动以查看滚动位置：</p>
      <p>滚动位置：{scrollTop}</p>
    </div>
  );
}

在这个例子中，每当用户滚动页面时，handleScroll函数就会被调用。然而，我们不是直接更新scrollTop状态，而是将其传递给 throttle 函数，以确保它每100ms只被调用一次，即使用户在该期间多次滚动。

通过在React应用程序中使用防抖和节流，可以创建更响应和高效的用户界面，为用户提供更好的体验。

4. 虚拟化长列表

虚拟化是一种提高显示长列表项目的应用程序性能的技术。虚拟化背后的想法是只渲染当前在屏幕上可见的项目，而不是渲染列表中的所有项目。这可以显著减少显示列表所需的内存和CPU使用量，从而导致更快的加载时间和更流畅的用户体验。

这里是一个如何使用 react-virtualized 来虚拟化长列表的例子：

import React from 'react';
import { List } from 'react-virtualized';

// 定义列表中每行的高度
const rowHeight = 30;

// 定义列表中总项目数
const totalItems = 1000;

// 定义可见区域（即视口）的大小
const rowCount = 10;
const width = 300;
const height = rowCount * rowHeight;

// 定义列表的数据
const listData = Array.from({ length: totalItems }, (_, i) => `Item ${i}`);

// 定义用于渲染列表中每行的组件
const Row = ({ index, style }) => (
  <div style={style}>{listData[index]}</div>
);

// 渲染虚拟化列表
const VirtualizedList = () => (
  <List
    width={width}
    height={height}
    rowCount={totalItems}
    rowHeight={rowHeight}
    rowRenderer={Row}
  />
);

// 导出VirtualizedList组件以在您的应用中使用
export default VirtualizedList;

在这个例子中，我们定义了列表中每行的高度（rowHeight），列表中总项目数（totalItems），以及可见区域的大小（rowCount、width和height）。我们还定义了列表的数据（listData）和用于渲染每行的组件（Row）。

最后，我们使用react-virtualized的List组件渲染虚拟化列表。List组件接受几个props，包括列表的宽度和高度、行数和每行的高度，以及定义如何渲染每行的rowRenderer函数。

通过使用react-virtualized来虚拟化我们的长列表，我们可以显著提高React应用程序的性能，特别是对于具有大量项目的列表。

5. 优化图片

优化图片对于提高React应用程序的性能至关重要，因为图片可能会显著影响页面加载时间。

这里是一个如何在React应用程序中使用 react-optimized-image 包来优化图片的例子。

import React from 'react';
import OptimizedImage from 'react-optimized-image';

const MyComponent = () => (
  <OptimizedImage
    src="https://example.com/image.jpg"
    alt="优化的图片"
    width={300}
    height={200}
    loading="lazy" // 可选：设置为"eager"以立即加载图片
  />
);

export default MyComponent;

在这个例子中，我们使用 OptimizedImage 组件从远程URL加载图片。我们还指定了图片的宽度和高度，并将 loading prop设置为"lazy"以延迟加载图片，直到它接近视口。

react-optimized-image 包自动使用imgix服务优化图片，该服务提供图片压缩、调整大小和其他优化。该包还包括对延迟加载和渐进式加载的支持，这可以进一步提高加载时间和用户体验。

结论

性能优化在现代Web开发中至关重要，特别是随着Web应用程序复杂性的增加。

通过专注于减少不必要的渲染、采用懒加载和代码分割、使用防抖和节流、虚拟化长列表以及优化图片，开发者可以显著提高他们的React应用程序的性能。

在您的React应用中尝试这些措施，以确保它们尽可能地表现良好！

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。