優化 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中文網其他相關文章！