Image by catalyststuff on freeepik

您知道您的React应用程序的性能会直接影响您的转化率和保留率吗？

使您的页面更快，更优化的速度可以使您获得良好的用户体验。

在本文中，我将向您展示提高React应用程序性能的5种方法。

让我们潜入。

使用浏览器工具监视性能

浏览器工具和扩展是测量应用程序性能的好方法。使用React Dev工具之类的工具，您可以检查哪些组件正在渲染以及它们为何渲染。这可以帮助您确定不必要的重新渲染以及发生这种情况的原因。这样，您可以在应用程序上使用以减轻不必要的重新汇款。

窗口或列出虚拟化

此技术对于显示长列表的应用程序很有用。窗口涉及显示有限数量的列表并按需加载其他列表。
这可以大大提高您的反应应用程序的性能。有两个很棒的库来实现react：react-window和react-list-virtualization中的虚拟化列表。

懒惰的加载组件

只有在需要时加载组件才是提高您的React应用程序性能的另一种好方法。
将lazy()函数和Suspense组件用于懒负载组件。
lazy()函数仅接受一个函数作为必须调用动态导入语句的参数。它返回了解决反应组件的承诺。
然后，可以将组件包裹在Suspense组件中，并带有指定的后备组件（加载指示器），该组件在加载时会显示。

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

// Lazy load the component
const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>My App</h1>

      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

必要时保持州本地

当组件的状态发生变化时，React将组件及其子女及其子女一起重新呈现。对于小应用程序，这没有问题。对于具有在渲染前执行昂贵计算的组件的应用程序，这可以大大降低您的应用程序性能。
为了避免不必要的组件重新渲染组件，您只想将州保留到只关心国家的组件。
但是，这并不总是可行的，因为某些州需要是全球性的。

使用useMemo和useCallback挂钩来改善应用程序性能

当组件状态或道具发生变化时，一个组件重新呈现。
如果父母的组件重新呈现，则其子组件也重新渲染，无论state/props是否有变化。
这可能会引起性能问题，尤其是如果儿童组件执行昂贵的计算。
使用useMemo钩，您可以缓存功能的结果。它将函数作为第一个参数和依赖项数组作为第二个参数。如果根据Object.is比较确定，依赖关系阵列中元素的值不会更改，则React跳过重新渲染组件。
useCallback钩的功能相同，但仅返回函数的定义，而不是调用它的结果。
这两个钩都用于记忆反应组件/功能。
这是useMemo和useCallback钩的简单实现ð

import React, { useState, useMemo, useCallback } from 'react';

function App() {
  const [count, setCount] = useState(0);

  // Example of useMemo
  const doubledCount = useMemo(() => {
    console.log('Calculating doubled count...');
    return count * 2;
  }, [count]);

  // Example of useCallback
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
      <h2>Doubled Count: {doubledCount}</h2>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default App;

结论

提高应用程序性能可以为您的用户带来更丰富的体验，从而提高您的转化率和保留率。
在本文中，我概述了您可以改善React应用程序性能的五种方法。提到的技术也可以应用于几乎任何框架。

在Twitter上关注我，以获取有关React和JavaScript的更多提示和技巧。