掌握 React 中的效能優化：深入探討 useCallback 和 useMemo-js教程-PHP中文網

掌握 React 中的效能優化：深入探討 useCallback 和 useMemo

DDD

發布： 2024-12-03 22:45:11

原創

811 人瀏覽過

Mastering Performance Optimization in React: A Deep Dive into useCallback and useMemo

介紹

作為使用 React 和 Next.js 的前端開發人員，隨著應用程式的擴展，我經常遇到效能挑戰。解決這些問題的最有效方法之一是透過最佳化技術，特別是使用 useCallback 和 useMemo 掛鉤。在這篇文章中，我將解釋這些鉤子是如何運作的，提供實際範例，並說明如何將它們應用到實際專案中以提高效能。

了解 React 中的效能最佳化

React 是為了提高效率而建構的，但隨著應用程式的成長，效能可能會因不必要的重新渲染而受到影響。每次重新渲染元件時，都會重新建立其中定義的任何函數，這可能會導致效能瓶頸。這就是 useCallback 和 useMemo 成為優化 React 應用程式的重要工具的地方。

什麼是useCallback？

useCallback 鉤子用於記憶函數。它會傳回回調函數的記憶版本，僅當其依賴項之一發生變更時該版本才會變更。當將回調傳遞給依賴引用相等性的子元件以防止不必要的渲染時，這特別有用。

const memoizedCallback = useCallback(() => {
  // callback logic
}, [dependencies]);

登入後複製

真實範例：部落格應用程式中的評論提交

假設您正在為部落格應用程式建立評論部分。每次評論提交都會觸發評論清單的重新呈現。透過使用 useCallback，您可以最佳化提交處理程序以防止不必要的重新渲染。

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

const CommentSection = ({ postId }) => {
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState('');

  const handleCommentSubmission = useCallback(() => {
    setComments((prevComments) => [...prevComments, newComment]);
    setNewComment('');
  }, [newComment]);

  return (
    <div>
      <h2>Comments</h2>
      <ul>
        {comments.map((comment, index) => (
          <li key={index}>{comment}</li>
        ))}
      </ul>
      <input
        type="text"
        value={newComment}
        onChange={(e) => setNewComment(e.target.value)}
      />
      <button onClick={handleCommentSubmission}>Submit</button>
    </div>
  );
};

登入後複製

在此範例中，_handleCommentSubmission _函數已被記憶。只有在 newComment 更改時才會重新建立它，從而防止依賴此函數的任何子元件不必要的重新渲染。

useMemo 是什麼？

useMemo 鉤子用於記憶昂貴的計算。它會傳回一個記憶值，僅當其依賴項之一發生變更時才重新計算。這有助於避免每次渲染時進行昂貴的重新計算。

const memoizedValue = useMemo(() => {
  // Expensive calculation
  return computedValue;
}, [dependencies]);

登入後複製

現實範例：過濾大型資料集

考慮一個顯示大量產品清單的應用程式。當根據使用者輸入過濾此列表時，在每個渲染上重新計算過濾結果可能效率很低。使用 useMemo，您可以優化這個過程。

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

const ProductList = ({ products }) => {
  const [filterText, setFilterText] = useState('');

  const filteredProducts = useMemo(() => {
    return products.filter((product) =>
      product.name.toLowerCase().includes(filterText.toLowerCase())
    );
  }, [filterText, products]);

  return (
    <div>
      <input
        type="text"
        placeholder="Search products..."
        value={filterText}
        onChange={(e) => setFilterText(e.target.value)}
      />
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

登入後複製

在此範例中，僅當filterText或產品變更時才計算filteredProducts陣列。這可以防止在其他狀態變數發生變化時重新渲染期間進行不必要的過濾計算。

使用 useCallback 和 useMemo 的最佳實踐