优化 React 应用程序：通过简单技术获得更好的性能

React 是构建用户界面的流行工具，但随着应用程序变得越来越大，它们的速度可能会变慢。在本文中，我将介绍可用于优化 React 应用程序的不同技术。

1. 使用 React.memo 避免不必要的重新渲染

如果你有一个不需要一直更新的组件，可以用 React.memo 包装它。这有助于 React 记住最后的输出，并在没有任何变化的情况下跳过重新渲染。

import React from 'react';

const MyComponent = React.memo((props) => {
  // Your component logic
});

2. 防止使用 PureComponent 进行额外工作

如果您使用类组件，请扩展 React.PureComponent 而不是 React.Component。这告诉 React 仅在 props 或 state 实际发生变化时重新渲染。

import React from 'react';

class MyComponent extends React.PureComponent {
  // Your component logic
}

3. 使用 useCallback 和 useMemo 来保存工作

React hooks useCallback 和 useMemo 通过记住函数和值来帮助您节省工作量。这可以避免每次组件渲染时创建新的组件。

• useCallback：记住一个函数。

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

• useMemo：记住一个值。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

4. 使用 React.lazy 和 Suspense 按需加载代码

仅在需要时使用 React.lazy 和 Suspense 加载部分代码。这会使您的初始加载速度更快。

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}

5. 按路由拆分代码

通过按路由拆分代码，仅加载每个页面所需的代码。这加快了初始加载时间。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { lazy, Suspense } from 'react';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <router>
      <suspense fallback="{<div">Loading...}>
        <switch>
          <route path="/" exact component="{Home}"></route>
          <route path="/about" component="{About}"></route>
        </switch>
      </suspense>
    </router>
  );
}

6. 延迟加载图像和组件

延迟加载图像和组件，直到需要它们为止。这可以提高初始加载时间和性能。

• 延迟加载图像： 使用 img 标签中的 loading 属性来推迟屏幕外图像。

<img src="image.jpg" alt="优化 React 应用程序：通过简单技术获得更好的性能" loading="lazy">

• 延迟加载组件： 对组件使用 React.lazy 和 Suspense。

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}

7. 避免在 JSX 中使用内联函数

JSX 中的内联函数可能会减慢速度，因为它们每次都会创建新实例。在 render 方法之外定义它们或使用 useCallback。

// Instead of this
<button onclick="{()"> doSomething()}>Click me</button>

// Do this
const handleClick = useCallback(() => {
  doSomething();
}, []);
<button onclick="{handleClick}">Click me</button>

8. 使用 React 虚拟化优化大型列表

处理大型列表时，使用像react-window或react-virtualized这样的库来仅渲染屏幕上可见的内容，从而减少负载。

import { FixedSizeList as List } from 'react-window';

const MyList = ({ items }) => (
  <list height="{500}" itemcount="{items.length}" itemsize="{35}" width="{300}">
    {({ index, style }) => (
      <div style="{style}">
        {items[index]}
      </div>
    )}
  </list>
);

9. 节流和去抖事件

限制或消除频繁的函数以控制它们运行的​​频率。这对于滚动或打字等事件特别有用。

import { useCallback } from 'react';
import { debounce } from 'lodash';

const handleInputChange = useCallback(
  debounce((value) => {
    // Handle the change
  }, 300),
  []
);

10. 对列表使用唯一键

确保每个列表项都有唯一的 key prop。这有助于 React 跟踪项目并有效更新它们。

const items = list.map((item) => (
  <listitem key="{item.id}"></listitem>
));

11. 部署生产版本

始终使用 React 应用程序的生产版本，以便从缩小和消除死代码等优化中受益。

# Create a production build
npm run build

通过使用这些技术，您可以使您的 React 应用程序更快、更高效，为您的用户提供更好的体验。优化是一个持续的过程，因此请定期分析和改进您的应用程序。

编码愉快。

以上是优化 React 应用程序：通过简单技术获得更好的性能的详细内容。更多信息请关注PHP中文网其他相关文章！