2023 年 11 大 React 性能优化技术

时间是一种宝贵的资产，如果您的 Web 应用程序需要不必要的耐心来吸引用户的注意力，那么任何用户都不会愿意浪费它。React 是一种流行的框架，开发人员认为它可以提高渲染性能。这就是为什么像 LinkedIn、DropBox、CSDN、百度等大公司都将 React 用于他们的 Web 应用程序的原因。

然而，React 甚至渲染了许多不相关的组件来解决此类性能问题；开发人员可以通过考虑一些主要措施并暗示它们来巧妙地和有意识地确保React 性能优化方法。

改进和提升 React 性能的 11 种行之有效的方法

我们推荐一些很好的React 性能优化技术来克服昂贵的 DOM 操作。找出方法。

1. React 应用程序中的窗口或列表虚拟化

许多具有或显示长列表的 React 应用程序通常会遇到性能问题。在加载应用程序之前，整个列表将在 DOM 中呈现，导致 UI 滞后并严重影响 React.js 应用程序性能。

克服此瓶颈的一种方法是通过列表虚拟化或窗口化。在这里，我们不在应用程序屏幕上呈现完整的长列表组件，而是只允许在 DOM 上呈现有限的项目列表，因为它是可见的。

可用于窗口化的两个库是 react-window 和 react-virtualized；您将启用在应用程序屏幕上呈现大量列表的一小部分。您的React 应用程序性能将即兴发挥。

2. 列表渲染的关键配合

在 React 中使用列表时，您可以将关键属性分配给有助于呈现即将到来的 ist 项目的元素。

在动态列表的情况下，如果开发人员错误地将组件键分配给列表元素，它就会对用户有用，从而成为 React 应用程序的性能障碍。这里，新的列表条目会自动提示之前的列表条目，这是不必要的。

您必须为您的列表组件分配一个唯一的键值来解决这个瓶颈。因此，为您的动态列表使用 Key={ } 以提高 React 应用程序的性能。

3. 在 React 中延迟加载图片

当您的 React 应用程序包含许多图像时，您的 React 应用程序性能很可能会下降。发生这种情况是因为 DOM 会在显示用户屏幕之前完全渲染所有图像。因此我们建议使用延迟加载图像，它会等到轮到图像出现在用户屏幕上时才渲染该特定图像。

延迟加载图像可以防止创建不必要的 DOM 节点，就像我们讨论的窗口化一样。用于延迟加载以提高 React 性能的流行库是react-lazyload和react-lazy-load-image-component。

您是否仍然认为图像正在对您的 React Js 应用程序造成严重破坏？
聘请我们的 React 开发人员并在您见证他们提高您的 React 应用程序性能时退缩

4. 功能组件&组件交互

优化 React 应用程序性能的微妙方法是使用功能组件。虽然这听起来很陈词滥调，但它是快速构建高效和高性能 React 应用程序的最直接且经过验证的策略。

我们的 React 专家在使用组件时有一些建议。

使用像 React Devtools（扩展）这样的 React 组件的一些优点是：
🟠 需要更少的代码，
🟠 易于理解，
🟠 组件是无状态的，
🟠 易于测试，
🟠 提取更小组件的灵活性，以及
🟠 交互性

5. 了解如何处理“这个”

功能组件不需要“this”绑定，您可能希望尽可能使用它们。但是，如果你使用 ES6 绑定，React 不会自动绑定组件中的函数。但是，您可以手动实现绑定。以下是绑定组件和函数的一些方法：

🟠 在渲染中绑定
🟠 在渲染中允许箭头函数
🟠 在构造函数中绑定
🟠 在类属性中绑定箭头函数 [不在官方 ECMAscript 中]

6. 在“SetState”中使用函数

我们建议在 setState 函数中使用函数而不是对象。这个建议是因为状态更改不会立即暗示，正如 React 文档所传达的那样。因此，而不是这个：

this.setState({correctData: !this.state.correctData});

使用这种方式：

this.setState((prevState, props) => {
    返回 {correctData: !prevState.correctData});
  }

上面的函数将接收先前的状态作为其第一个参数，并将应用更新时的道具作为第二个参数。

7.利用道具类型

Prop-types 是一个用于 props 类型检查的库。下面的代码片段展示了如何从 prop-type 库中导入函数：

从“prop-types”导入 PropTypes；类欢迎扩展组件{
   使成为（） {
     返回 <h1>你好，{this.props.name}</h1>;
   }
  }
 Welcome.propTypes = {
    名称：PropTypes.string.isRequired
  }

8. 修剪 Javascript 包

如果你想消除代码冗余，学习修剪你的 Javascript 包。当您切断重复和不必要的代码时，您的 React 应用程序性能的可能性会成倍增加。您必须分析和确定捆绑代码。

9. 服务器端渲染（SSR）

尝试有意识地使用 SSR 并检查您的应用程序是否真的需要 SEO。SSR 占用了巨大的负载，所以如果你在不需要的时候避免使用它，你将会得到祝福。

10. React Redux 优化技巧

雅虎面临的一个众所周知的缺陷是使用 Redux 构建 React 应用程序时需要考虑的经典示例。事实上，这种组合是致命的，可以使复杂的情况结构化，但是当你使用 Redux 时，你的 React 应用程序会重新渲染并降低你的性能。

我们将分享两种使用 React Redux 应用程序克服这一挑战的方法。第一个是当 React 应用程序中的高阶组件被分配用于渲染操作时使用RESELECT库。雅虎通过使用这个库而受益匪浅。

另一种优化React Redux 应用程序性能的方法是使用 Immutable.js。不可变列表的性能比可变列表高得多（最多 4 倍）。当您在 Redux 应用程序中使用可变数据结构时，Redux 状态树会消耗大量内存来复制数据，从而影响应用程序的性能。

使用不可变数据结构不会更新原始数据，而是会在需要时生成更新数据结构的新版本。这种技术极大地提高了 React 的性能。

11. 使用 React Memo [Memoization] 提高 React App 性能

在这里，我们将介绍如何使用 React 备忘录来优化 React 应用程序性能的基本概述。

[注意：React.memo 与 useMemo 不同。人们经常因为他们的名字而混淆这两者。]

什么是 React.memo？

我们都知道 react 应用程序中 render 方法的重量。我们不是吗？我们知道在没有任何重大更改的情况下渲染组件的后果。因此，请考虑这样一种情况，即使您的输入道具相同，您也会渲染一个类组件。合适吗？显然，不是！当输入道具是常量时，你为什么要调用如此繁重的渲染方法？在这种特殊情况下，您应该使用 PureComponent 或 shouldComponentUpdate()。等等，这是类组件的场景；功能（无状态）组件呢？不用担心; 也有一个解决方案：React.Memo。

React.memo：高阶组件。

如果您的功能组件因为接收到相同的输入道具而呈现完全相同的结果，您可以将其包装到 React.memo 中以提高性能。这意味着 React 会将上次渲染与当前渲染进行比较，如果没有发现任何变化，它将跳过渲染组件。这将有助于提高 React 应用程序的性能。你可以将你的功能组件包装到 React.memo 中，如下所示：

const MyExampleOfMemo = React.memo(function MyComponent(props) {
  /* 使用道具渲染 */});

如果您选择不传递任何第二个参数，React 将使用其默认行为进行比较：对 props 对象中的复杂对象进行浅层比较。但是，如果您决定传递第二个参数，那么您就可以控制比较（即您可以自定义比较函数）

函数 MyExampleComponent(props) {
  /* 使用道具渲染 */}函数 equalOrNot(prevProps, nextProps) {
  /*
  如果要渲染的 nextProps 返回，它将返回 true
  与 prevProps 渲染的结果相同，
  否则返回假
  */}导出默认 React.memo(MyExampleComponent, equalOrNot);

使用 React.memo 时要小心。因为它会产生错误。

让我们举一个简单的例子，来说明 React.Memo 的需求。

让我们制作一个每秒使用 setState() 的小应用程序：每秒调用 render。我知道这是不可行的，但这只是为了弄清楚为什么我们需要 React.memo。

类 App 扩展组件 {
  cities = ["孟买", "班格洛尔", "德里"];
  state = { city: "匿名" };
  componentDidMount() {
    设置间隔（（）=> {
      const city = this.generateCity();
      this.setState({ 城市 });
    }, 1000);
  }
  生成城市 = () =>
    this.cities[Math.floor(Math.random() * this.cities.length)];
  使成为（） {
    返回 <View city="Kolkata" />;
  }}

在这里，我们可以看到我们在 componentDidMount() 中调用了一个名为 setInterval 的函数。这确实从城市数组中设置了城市名称，因为我们有另一个函数叫做 generateCity()。

要记住的是 setState() 将每秒调用一次，因此组件将每秒重新渲染一次。因此，无论城市是硬编码的，我们的 View 组件也会被渲染。可行吗？当然不是。

const View = ({ city }) => `城市名:: ${city}`;

这没有意义。如果道具保持不变，为什么我们要重新渲染一个组件（这里是视图组件）？

现在，我们从上面提到的内容中了解到记忆的概念。如果 props 的值不变，我们可以使用 React.memo 来限制组件的渲染。

让我们将 <View/> 组件包装在一个备忘录中。

从“反应”导入{备忘录}；const View = memo(({ city }) => `城市名:: ${city}`);

现在，我们可以注意到 <View/> 组件只会渲染一次，因为 prop city 的值没有改变。

这是道具被硬编码时的场景。让我们看看如果我们选择用状态值替换硬编码值会发生什么。

在函数 generateCity() 中，城市的值是从城市数组中随机选择的。

因此，每当将相同的值分配给城市时，<View/>组件将不会呈现，因为城市属性将因此保持相同的值。

记忆化！！

不要混淆 React.memo 和 useMemo。

不要继续他们的名字；他们有不同的功能。

可以说 React.memo 和 useMemo 都使用了 Memoization 的概念，但仍然保持着各自的个性。

React.memo 通过控制各个组件的渲染来优化 React App 的性能。您可以控制整个组件：是否渲染它。

另一方面，useMemo 不提供如此广泛的控制。它用于更一般的目的，并打算返回记忆值。useMemo 是一个钩子，有通用的使用规则。底线是，React.memo 通过避免那些 prop 不会改变的渲染来优化 React 应用程序。但是在优化性能时要小心，因为它可能会产生错误。

结论

（言鼎科技）专做软件开发,微信小程序,网站开发,软件外包,手机APP开发，欢迎资讯！