首页 > 其他分享> 文章详细

优化 React 应用程序性能的 5 个技巧

2023-02-09 20:20:09 阅读：295 来源： 互联网

标签：优化React 虚拟化长

作为 React 开发人员，最令人沮丧的事情之一就是投入时间和精力来构建应用程序，却发现它缓慢且无响应。

在这篇文章中，我们将介绍五个提高 React 应用程序性能的技巧。

1.减少不必要的渲染

不必要的重新渲染会降低您的应用程序的速度，使它们感觉迟钝且反应迟钝。

通过利用一些 React 的内置钩子，我们可以将不必要的渲染保持在最低限度。

`React.Memo`

在 React 中，组件将在 state 或 prop 值更改时重新渲染。这也适用于 props 可能保持不变但父组件的 props 发生变化的子组件。

在这种情况下，我们可以使用React.memo()一个高阶组件来缓存子组件的输出。现在子组件只有在它的 props 改变时才会被渲染。这对于具有许多不经常更改的道具的组件非常有用。

const myComponent = React.memo((props) => {
    /* render using props */
});

export default myComponent;

您可以在此处找到有关如何使用 React 备忘录的 React 文档。

`useCallback`

useCallback将返回回调的备忘版本，仅当其中一个依赖项发生更改时才会更改。这在将回调传递给依赖于引用相等性的优化子组件以防止不必要的渲染时很有用。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

2. 代码拆分延迟加载

随着您的应用程序随着第三方库和更多功能的增加而变得越来越大，您的应用程序的捆绑包也会越来越大。反过来，这会增加应用程序的加载时间。

为了解决这个问题，我们可以拆分包并只加载当前需要的内容。在 React 中，这可以通过使用 React.lazy 函数动态导入组件来完成。

前：

import OtherComponent from './OtherComponent';

后：

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

这将自动加载包含OtherComponent此组件首次呈现时的包。

然后惰性组件应该在Suspense组件内部呈现，这允许我们在等待惰性组件加载时显示一些后备内容（例如加载指示器）。

import React, { Suspense } from 'react';

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

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

您可以在此处找到有关代码拆分的完整文档。

3.去抖动和节流事件操作

去抖动是一种用于通过延迟、分组和仅执行最后一次调用来提高频繁执行的操作的性能的技术。例如，如果您有一个搜索字段，在您输入时会查询结果，那么为每次击键调用 API 将非常低效，因为我们只关心最终结果。在这种情况下，去抖功能将非常有用，基本上只在预定超时后调用搜索 API。

节流或速率限制是一种用于通过限制执行速率来提高频繁执行的操作的性能的技术。它类似于去抖动，除了它保证动作的正常执行。这对于调整大小和滚动等高频事件操作最为有用，这些操作会导致 React 组件重新渲染。由于我们不需要保持这些操作 100% 同步，我们可以间歇性地调用这些事件的处理程序。

您可以在此处了解有关节流和去抖动组件的更多信息。

4. 虚拟化长列表

如果您需要显示包含许多行的大表或列表，加载列表中的每个项目会显着影响性能。

列表虚拟化或“窗口化”是仅呈现用户可见内容的概念。最初呈现的元素数量是整个列表的一小部分，当用户继续滚动时，可见内容的“窗口”会移动。这提高了列表的呈现和滚动性能。

您可以使用react-window库在您的应用程序中开始虚拟化列表。

5. 优化你的图片

虽然这看起来很明显，但大图像会显着影响应用的性能。从加载时间短到性能低下，未优化的大图像存在明显的缺点。为避免这些性能损失，您可以压缩它们、调整它们的大小并以适当的格式（例如 webp）提供它们。执行此操作的最佳方法是使用图像 CDN 服务，该服务将自动执行优化其所服务图像的步骤。

结论

应用程序性能不佳会降低用户参与度并对 SEO 产生负面影响。通过遵循这些提示，您将能够通过去抖动、节流和虚拟化长列表来提高性能，通过防止不必要的重新渲染React.memo，并通过优化图像来全面提高应用程序的速度。

标签：优化React,虚拟化长
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9