前言

在React應用程序中進行性能優化至關重要，因為它直接影響用戶體驗，隨后影響轉化率和用戶留存率。一個經過優化的React應用加載更快，響應迅速，消耗更少的資源，從而為用戶提供更順暢的互動體驗。優化React應用程序的性能對于保留和吸引用戶、降低跳出率以及最終實現所期望的業務結果至關重要。9y828資訊網——每日最新資訊28at.com

記憶化（Memoization）是改善React應用程序性能的一種方式。記憶化涉及緩存值和函數以實現更快的渲染。9y828資訊網——每日最新資訊28at.com

在本文中，我們將了解什么是記憶化以及如何使用useMemo和useCallback鉤子來實現記憶化。9y828資訊網——每日最新資訊28at.com

理解React中的記憶化

記憶化是存儲計算結果的過程，以便在不重新計算的情況下檢索它。記憶化用于跳過組件的不必要重新渲染。9y828資訊網——每日最新資訊28at.com

在React中，可以通過使用useMemo和useCallback鉤子來實現記憶化。這些鉤子允許你通過緩存函數調用和函數本身來跳過重新渲染。9y828資訊網——每日最新資訊28at.com

使用useMemo入門

useMemo鉤子用于緩存函數調用。useMemo鉤子接受兩個參數：9y828資訊網——每日最新資訊28at.com

• 函數
• 依賴項數組

const doubledNumber = useMemo(() => {  return someExpensiveCalculation(number);}, [number]);

useMemo鉤子在第一次渲染時返回調用函數的結果。在后續重新渲染中，useMemo鉤子將提供你的函數調用的緩存值，除非至少一個依賴項發生更改。9y828資訊網——每日最新資訊28at.com

在JavaScript中，函數在代碼再次運行時會被重新創建。這意味著盡管函數的代碼相同，但每次應用程序重新渲染時，你的函數并不相同。這是因為JavaScript對象和函數是引用對象。9y828資訊網——每日最新資訊28at.com

useMemo鉤子旨在通過緩存調用函數的結果來消除函數的重新創建。在后續重新渲染中，useMemo鉤子會返回緩存的值，跳過函數的重新創建。9y828資訊網——每日最新資訊28at.com

讓我們通過一個實際示例來了解如何在React中使用useMemo。9y828資訊網——每日最新資訊28at.com

在這個示例中，我們正在對幾千篇博客文章進行排序，并將每篇博客文章顯示在屏幕上。在每次重新渲染時對博客文章進行排序可能會減慢我們的應用程序。9y828資訊網——每日最新資訊28at.com

使用useMemo鉤子來跳過博客文章的排序，如果文章列表沒有更改。9y828資訊網——每日最新資訊28at.com

function PostList({ posts }) {  const sortedPosts = useMemo(() => {    return [...posts].sort((a, b) => a.date - b.date);  }, [posts]);  return (    <div>      <h2>已排序的文章</h2>      <ul>        {sortedPosts.map((post) => (          <li key={post.id}>{post.title}</li>        ))}      </ul>    </div>  );}

useMemo鉤子用于緩存sortedPosts。只有在posts的值更改時，sortedPosts才會重新計算。9y828資訊網——每日最新資訊28at.com

通過這種方式，排序操作僅在文章數組更改時發生，從而跳過重新渲染并提高性能。9y828資訊網——每日最新資訊28at.com

充分利用useCallback的能力

useCallback用于緩存函數聲明。它同樣接受兩個參數：9y828資訊網——每日最新資訊28at.com

• 函數
• 依賴項數組

與useMemo不同，useCallback不會調用你的函數。useCallback只是將函數返回給你。你可以自行決定何時以及是否調用函數。9y828資訊網——每日最新資訊28at.com

useCallback鉤子的工作方式與useMemo鉤子類似。useCallback通過返回函數的緩存版本來消除函數的重新創建。只有在依賴項中的至少一個值發生更改時，才會重新創建你的函數。9y828資訊網——每日最新資訊28at.com

讓我們看一個使用useCallback來優化React應用程序的示例。9y828資訊網——每日最新資訊28at.com

在React組件中，當單擊按鈕時，你有一個對產品數組進行排序的函數。在每次重新渲染時，這個排序函數都會被重新創建。9y828資訊網——每日最新資訊28at.com

使用useCallback鉤子來緩存sortPosts函數聲明，以及posts狀態作為一個依賴項。9y828資訊網——每日最新資訊28at.com

import React, { useState, useCallback } from 'react';function PostList() {  const [posts, setPosts] = useState([    { id: 1, title: '文章1', date: new Date('2023-10-15T00:00:00.000Z') },    { id: 2, title: '文章2', date: new Date('2023-10-10T00:00:00.000Z') },    { id: 3, title: '文章3', date: new Date('2023-10-20T00:00:00.000Z') },  ]);  const sortPosts = useCallback(() => {    const sortedPosts = [...posts].sort((a, b) => a.date - b.date);    setPosts(sortedPosts);  }, [posts]);  return (    <div>      <button onClick={sortPosts}>排序文章</button>      <ul>        {posts.map((post) => (          <li key={post.id}>{post.title}</li>        )}      </ul>    </div>  );}export default PostList;

現在，只有當posts狀態更改時，sortPosts函數才會被重新創建，從而提高我們的React應用程序性能。9y828資訊網——每日最新資訊28at.com

通過結合使用useCallback和useMemo來優化性能

useCallback和useMemo鉤子可以一起使用，以獲得顯著的性能提升。9y828資訊網——每日最新資訊28at.com

React組件重新渲染依賴以下兩個條件：9y828資訊網——每日最新資訊28at.com

• 狀態發生變化
• 屬性發生變化

通過useCallback鉤子，你可以緩存屬性（如果是一個函數），然后將其傳遞給包裝在useMemo中的子組件。9y828資訊網——每日最新資訊28at.com

接下來看一個將useCallback與useMemo結合使用的示例。9y828資訊網——每日最新資訊28at.com

假設你正在為網站開發產品列表頁面。用戶可以根據價格、品牌和類別等各種標準對產品進行篩選和排序。9y828資訊網——每日最新資訊28at.com

如果不使用useCallback和useMemo鉤子，你的ProductList組件將如下所示：9y828資訊網——每日最新資訊28at.com

javascriptCopy codeimport React, { useState } from 'react';function ProductList({ products }) {  const [filter, setFilter] = useState('');  const [sortBy, setSortBy] = useState('price');  // 根據用戶輸入篩選產品  const filteredProducts = products.filter(product =>    product.title.toLowerCase().includes(filter.toLowerCase())  );  // 對篩選后的產品進行排序  const sortedProducts = [...filteredProducts].sort((a, b) => {    if (sortBy === 'price') {      return a.price - b.price;    } else if sortBy === 'rating') {      return b.rating - a.rating;    }    // 在這里處理其他排序條件  });  // 處理篩選更改  const handleFilterChange = (event) => {    setFilter(event.target.value);  };  // 處理排序更改  const handleSortChange = (event) => {    setSortBy(event.target.value);  };  return (    <div>      <input        type="text"        placeholder="篩選產品"        value={filter}        onChange={handleFilterChange}      />      <select value={sortBy} onChange={handleSortChange}>        <option value="price">價格</option>        <option value="rating">評分</option>        {/* 根據需要添加更多排序選項 */}      </select>      <ul>        {sortedProducts.map(product => (          <li key={product.id}>{product.title}</li>        )}      </ul>    </div>  );}export default ProductList;

雖然ProductList組件沒有問題，但它可能導致不必要的重新渲染和性能瓶頸。9y828資訊網——每日最新資訊28at.com

如果ProductList處理大量產品，不必要的重新渲染會減慢你的電子商務站點。9y828資訊網——每日最新資訊28at.com

使用useMemo和useCallback鉤子來減輕不必要的重新渲染并加速你的網站。9y828資訊網——每日最新資訊28at.com

javascriptCopy codeimport React, { useState, useMemo, useCallback } from 'react';function ProductList({ products }) {  const [filter, setFilter] = useState('');  const [sortBy, setSortBy] = useState('price');  // 根據用戶輸入篩選產品  const filteredProducts = useMemo(() => {    return products.filter(product => product.title.toLowerCase().includes(filter.toLowerCase()));  }, [products, filter]);  // 對篩選后的產品進行排序  const sortedProducts = useMemo(() => {    return [...filteredProducts].sort((a, b) => {      if (sortBy === 'price') {        return a.price - b.price;      } else if sortBy === 'rating') {        return b.rating - a.rating;      }      // 在這里處理其他排序條件    });  }, [filteredProducts, sortBy]);  // 記憶化回調來處理篩選更改  const handleFilterChange = useCallback((event) => {    setFilter(event.target.value);  }, []);  // 記憶化回調來處理排序更改  const handleSortChange = useCallback((event) => {    setSortBy(event.target.value);  }, []);  return (    <div>      <input        type="text"        placeholder="篩選產品"        value={filter}        onChange={handleFilterChange}      />      <select value={sortBy} onChange={handleSortChange}>        <option value="price">價格</option>        <option value="rating">評分</option>        {/* 根據需要添加更多排序選項 */}      </select>      <ul>        {sortedProducts.map(product => (          <li key={product.id}>{product.title}</li>        )}      </ul>    </div>  );}export default ProductList;

在這個經過優化的ProductList組件版本中，useMemo用于優化篩選和排序操作，而useCallback用于記憶化篩選和排序更改的事件處理程序函數。ProductList組件僅在products的值發生變化時重新渲染。9y828資訊網——每日最新資訊28at.com

注意事項

盡管useMemo和useCallback是性能優化鉤子，但開發人員往往會過度使用這些鉤子。有些情況下，使用useMemo和useCallback并不對你的應用程序產生大的收益。由于現代計算機的快速性質，大多數操作都是廉價的。在操作廉價的情況下，你不需要useMemo和useCallback鉤子。例如，你有一個要排序的包含100個帖子的數組。使用useMemo或useCallback鉤子不會帶來任何性能提升，因為排序操作只需要幾毫秒。9y828資訊網——每日最新資訊28at.com

總結

記憶化用于提高React應用程序的性能，記憶化用于跳過組件的不必要重新渲染。useMemo和useCallback鉤子分別用于記憶化返回值和函數聲明。雖然useMemo和useCallback的行為類似，但兩者之間存在關鍵差異。useMemo返回調用函數的結果；useCallback返回函數本身。9y828資訊網——每日最新資訊28at.com

useMemo和useCallback鉤子有助于優化性能，但使用它們也可能帶來一些潛在問題，如過度優化和增加代碼復雜性。9y828資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-16535-0.htmlReact性能優化之useMemo、useCallback

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 七個殺手級IntelliJ IDEA插件

下一篇： 你寫的Python代碼到底多快？這些測試工具了解了解