React 重新渲染：最佳效能的最佳實踐-js教程-PHP中文網

React 重新渲染：最佳效能的最佳實踐

DDD

發布： 2024-09-12 22:33:02

原創

983 人瀏覽過

React Re-Rendering: Best Practices for Optimal Performance

React 高效的渲染機制是其受歡迎的關鍵原因之一。然而，隨著應用程式複雜性的增加，管理元件重新渲染對於最佳化效能變得至關重要。讓我們探索優化 React 渲染行為並避免不必要的重新渲染的最佳實踐。

1. 使用 React.memo() 作為函數式元件

React.memo() 是一個高階元件，用於記憶功能元件的渲染。它透過對目前 props 與先前的 props 進行淺層比較來防止不必要的重新渲染。如果 props 沒有改變，React 會跳過渲染元件並重複使用上次渲染的結果。

import React from 'react';

const MemoizedComponent = React.memo(function MyComponent(props) {
  // Component logic
});

登入後複製

2. 為類別元件實作 PureComponent

如果您使用類別元件，請考慮擴充 PureComponent 而不是 Component。 PureComponent 對 props 和 state 進行淺層比較，以確定元件是否應該更新。這有助於避免在 props 和狀態未更改時不必要的重新渲染。

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  // Component logic
}

登入後複製

3. 避免內嵌函數定義

在渲染方法中定義函數可能會導致不必要的重新渲染。相反，在渲染方法之外定義函數或使用箭頭函數來實現簡潔的事件處理程序。

class MyComponent extends React.Component {
  handleClick = () => {
    // Handle click
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

登入後複製

4. 使用 useCallback Hook 來記憶函數

useCallback 鉤子用於記憶函數。它可以防止在每個渲染上不必要地重新建立函數，這可能導致依賴這些函數的子元件不必要地重新渲染。

import React, { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    // Handle click
  }, []);

  return <button onClick={handleClick}>Click me</button>;
}

登入後複製

5. 利用 useMemo Hook 進行昂貴的計算

useMemo 鉤子用於記憶昂貴的計算。它可以防止每次渲染時不必要地重新計算值，從而提高效能，特別是對於複雜的計算。

import React, { useMemo } from 'react';

function MyComponent({ items }) {
  const filteredItems = useMemo(() => items.filter(item => item.visible), [items]);

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

登入後複製

6. 在列表中正確使用鍵

渲染元件清單時，始終提供唯一的 key prop。 React 在協調過程中使用鍵來有效地識別元素。不正確或遺失的密鑰可能會導致效能問題和意外行為。

<ul>
  {items.map(item => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

登入後複製

7. 透過動態導入實現程式碼分割

程式碼分割可讓您將應用程式的程式碼分割成更小的區塊。透過使用動態導入 (import())，您可以按需載入應用程式的各個部分，從而減少初始套件大小並縮短載入時間。

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

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

登入後複製