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

作为 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>
  );
}

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

本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。