构建现代 Web 应用程序时，性能是关键。用户期望应用程序快速、响应灵敏，即使是轻微的延迟也会导致沮丧。 React 虽然功能强大，但有时会遇到性能瓶颈，尤其是当应用程序规模和复杂性不断增长时。幸运的是，有多种技术可以优化性能，包括记忆、延迟加载等等。

在本指南中，我们将详细介绍一些优化 React 应用程序性能的最有效方法。我们将介绍记忆、延迟加载和 React Profiler 等工具的基础知识，以帮助您识别和修复瓶颈。开始吧！

简介：为什么性能在现代 React 应用程序中很重要

将您的网络应用程序想象成一辆汽车——无论它的外观多么时尚，如果它性能不佳，用户体验就会受到影响。在 React 应用程序中，这种“性能”是指组件渲染的速度以及数据或状态更改时更新的效率。

随着您的 React 应用程序的扩展，不必要地重新渲染组件或一次加载大量包可能会导致性能下降。这就是为什么学习 React 性能优化 技术对于构建流畅、高性能的应用程序至关重要。

React 中的记忆化

如何有效使用 React.memo 和 useMemo

记忆化是一个奇特的词，它的意思是缓存函数调用的结果，这样你就不必每次都重新计算它。在 React 中，记忆化通过记住先前渲染的结果并在没有任何更改的情况下使用缓存的结果来帮助防止不必要的重新渲染。

React.memo

让我们从 React.memo 开始。如果组件的 props 没有改变，这个高阶组件会阻止组件重新渲染。

例子：

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return 
Hello, {name}
;
});

在此示例中，MyComponent 仅在 name 属性更改时重新渲染。如果传递相同的名称值，React 将跳过渲染，从而提高性能。

使用备忘录

接下来是 useMemo。该钩子用于记住功能组件内昂贵的计算或值。

例子：

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total   item.value, 0);
  }, [items]);

  return 
Total Value: {expensiveCalculation}
;
}

这里，计算仅在项目数组更改时再次运行，通过避免在每次渲染时重新计算相同的结果来节省时间。

延迟加载组件

使用 React.lazy 缩短加载时间

延迟加载是一种技术，其中组件仅在需要时才加载，而不是预先加载所有内容。这有助于减少应用程序的初始加载时间，使其感觉更快。

React 提供了一个名为 React.lazy() 的内置函数，允许您按需加载组件。

例子：

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

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

function App() {
  return (
    Loading...}>
      
    
  );
}

在此示例中，MyComponent 仅在实际需要时才会加载。 Suspense 组件在获取组件时提供后备 UI（如加载旋转器），使用户体验更加流畅。

用于性能监控的 React Profiler

如何识别瓶颈

优化无法衡量的东西是很困难的。这就是 React Profiler 的用武之地。React Profiler 允许您跟踪组件的性能，识别缓慢的渲染，并测量重新渲染的“成本”。

要使用React Profiler，只需用 包装组件树并提供回调函数来收集性能数据。

例子：

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log({ id, phase, actualDuration });
}

function MyApp() {
  return (
    
      
    
  );
}

使用 Profiler，您可以跟踪每个组件渲染所需的时间，并找到可以改进性能的区域，例如不必要的重新渲染。

其他优化策略

代码分割、事件处理优化等

除了记忆和延迟加载之外，还有其他几种技术可以提高 React 应用程序的性能：

1. 代码拆分：将您的应用程序分成更小的块，可以使用 Webpack 的代码拆分功能按需加载。这会减小初始包的大小。

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

1. 事件处理优化：使用 useCallback 钩子来记忆事件处理程序，防止它们在每次渲染时重新创建。

   const handleClick = useCallback(() => {
     console.log('Clicked');
   }, []);

1. 去抖动和限制：通过去抖动或限制来优化事件侦听器，例如滚动或调整大小，以限制更新频率。

   const handleScroll = debounce(() => {
     console.log('Scroll event');
   }, 300);

结论：使用这些技术构建高性能 React 应用程序

构建快速高效的 React 应用程序需要多种技术的组合。通过将 memoization 与 React.memo 和 useMemo 结合使用，您可以防止不必要的重新渲染。 使用 React.lazy 延迟加载组件允许您通过仅在需要时获取组件来缩短加载时间。 React Profiler 可帮助您识别性能瓶颈并对其进行优化。

结合代码分割和事件优化等策略，您可以确保您的 React 应用程序提供流畅且响应灵敏的用户体验，即使它们的大小和复杂性不断增长。

准备好将您的 React 应用程序的性能提升到一个新的水平吗？ 在您的项目中尝试这些优化技术，并观察您的应用程序的速度提高！

如果您喜欢这篇文章，请考虑支持我的工作：

• 请我喝杯咖啡
• 致电寻求指导或职业建议
• 在 Twitter 上关注我
• 在 LinkedIn 上连接