本教程將講解如何在React中實現(xiàn)記憶化（Memoization）。記憶化通過存儲昂貴函數(shù)調(diào)用的結(jié)果並在再次需要時返回這些緩存的結(jié)果來提高性能。

我們將涵蓋以下內(nèi)容：

• React如何渲染UI
• 為什麼需要React記憶化
• 如何為函數(shù)式和類組件實現(xiàn)記憶化
• 關於記憶化的注意事項

本文假設您已經(jīng)基本了解React中的類組件和函數(shù)式組件。如果您想複習這些主題，請查看官方React組件和props文檔。

關鍵要點

• React中的記憶化通過存儲昂貴函數(shù)調(diào)用的結(jié)果並在再次需要時返回這些緩存的結(jié)果來提高性能。
• React使用虛擬DOM來高效地執(zhí)行DOM更新，但是對於大型組件，檢查虛擬DOM的性能影響可能很大。記憶化可以幫助避免不必要的重新渲染和虛擬DOM檢查。
• React.PureComponent和React.memo()分別可用於在類組件和函數(shù)式組件中實現(xiàn)記憶化。如果組件的props或state沒有改變，這些方法可以防止不必要的重新渲染。
• 如果一個函數(shù)作為prop傳遞給子組件，即使使用了React.memo()，子組件也會重新渲染。為了避免這種情況，可以使用useCallback()鉤子來防止每次父組件渲染時都重新創(chuàng)建函數(shù)。
• 應該謹慎地在React應用程序中使用記憶化。當組件對相同的props返回相同的輸出、包含多個UI元素（虛擬DOM檢查會影響性能）或經(jīng)常提供相同的props時，它最有效。

React如何渲染UI

在詳細介紹React中的記憶化之前，讓我們首先看看React如何使用虛擬DOM渲染UI。

常規(guī)DOM基本上包含一組表示為樹的節(jié)點。 DOM中的每個節(jié)點都是UI元素的表示。每當應用程序中發(fā)生狀態(tài)更改時，該UI元素及其所有子元素的相應節(jié)點都會在DOM中更新，然後重新繪製UI以反映更新的更改。

借助高效的樹算法，更新節(jié)點的速度更快，但重新繪製速度較慢，並且當該DOM具有大量UI元素時，會對性能產(chǎn)生影響。因此，在React中引入了虛擬DOM。

這是真實DOM的虛擬表示。現(xiàn)在，每當應用程序的狀態(tài)發(fā)生任何變化時，React不會直接更新真實DOM，而是創(chuàng)建一個新的虛擬DOM。然後，React將這個新的虛擬DOM與先前創(chuàng)建的虛擬DOM進行比較，以查找需要重新繪製的差異。

使用這些差異，虛擬DOM將有效地用更改更新真實的DOM。這提高了性能，因為虛擬DOM不會簡單地更新UI元素及其所有子元素，而是有效地僅更新真實DOM中必要的最小更改。

為什麼我們需要React記憶化

在上一節(jié)中，我們看到了React如何使用虛擬DOM有效地執(zhí)行DOM更新以提高性能。在本節(jié)中，我們將查看一個用例，該用例解釋了為了進一步提高性能而需要記憶化的原因。

我們將創(chuàng)建一個父類，其中包含一個按鈕來遞增名為count的狀態(tài)變量。父組件還調(diào)用子組件，並將prop傳遞給它。我們還在兩個類的render方法中添加了console.log()語句：

//Parent.js
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState((prevState) => {
      return { count: prevState.count + 1 };
    });
  };

  render() {
    console.log("Parent render");
    return (
      <div className="App">
        <button onClick={this.handleClick}>Increment</button>
        <h2>Count: {this.state.count}</h2>
        <Child name={"joe"} />
      </div>
    );
  }
}

export default Parent;

此示例的完整代碼可在CodeSandbox上找到。

我們將創(chuàng)建一個Child類，該類接受父組件傳遞的prop並在UI中顯示它：

//Child.js
class Child extends React.Component {
  render() {
    console.log("Child render");
    return (
      <div>
        <h2>Name: {this.props.name}</h2>
      </div>
    );
  }
}

export default Child;

每當我們單擊父組件中的按鈕時，count值都會更改。由於這是一個狀態(tài)更改，因此會調(diào)用父組件的render方法。

傳遞給子類的props在每次父級重新渲染時都保持不變，因此子組件不應重新渲染。但是，當我們運行上述代碼並繼續(xù)遞增count時，我們會得到以下輸出：

<code>Parent render
Child render
Parent render
Child render
Parent render
Child render</code>

您可以在以下sandbox中自己遞增上述示例的count，並查看控制臺的輸出：

[此處應嵌入CodeSandbox鏈接，但由於我無法訪問外部網(wǎng)站，無法提供]

從這個輸出中，我們可以看到，當父組件重新渲染時，它也會重新渲染子組件——即使傳遞給子組件的props沒有改變。這將導致子組件的虛擬DOM與之前的虛擬DOM執(zhí)行差異檢查。由於子組件中沒有差異——因為props在所有重新渲染中都是相同的——因此不會更新真實的DOM。

我們確實具有不會不必要地更新真實DOM的性能優(yōu)勢，但我們可以在這裡看到，即使子組件沒有實際更改，也會創(chuàng)建新的虛擬DOM並執(zhí)行差異檢查。對於小型React組件，此性能可以忽略不計，但對於大型組件，性能影響很大。為了避免這種重新渲染和虛擬DOM檢查，我們使用記憶化。

React中的記憶化

在React應用程序的上下文中，記憶化是一種技術，其中，每當父組件重新渲染時，只有當props發(fā)生更改時，子組件才會重新渲染。如果props沒有更改，它不會執(zhí)行render方法，而是返回緩存的結(jié)果。由於render方法未執(zhí)行，因此不會創(chuàng)建虛擬DOM和差異檢查——從而提高了性能。

現(xiàn)在，讓我們看看如何在類和函數(shù)式React組件中實現(xiàn)記憶化以避免這種不必要的重新渲染。

（以下內(nèi)容與原文類似，只是對語言和表達方式進行了一些調(diào)整，並保持了圖片位置和格式不變。由於無法訪問外部網(wǎng)站，我無法提供CodeSandbox鏈接。）

實現(xiàn)類組件中的記憶化

要在類組件中實現(xiàn)記憶化，我們將使用React.PureComponent。 React.PureComponent實現(xiàn)了shouldComponentUpdate()，它對state和props進行淺比較，並且只有在props或state發(fā)生更改時才渲染React組件。

將子組件更改為如下所示的代碼：

//Parent.js
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState((prevState) => {
      return { count: prevState.count + 1 };
    });
  };

  render() {
    console.log("Parent render");
    return (
      <div className="App">
        <button onClick={this.handleClick}>Increment</button>
        <h2>Count: {this.state.count}</h2>
        <Child name={"joe"} />
      </div>
    );
  }
}

export default Parent;

此示例的完整代碼如下所示：[此處應嵌入CodeSandbox鏈接]

父組件保持不變?，F(xiàn)在，當我們在父組件中遞增count時，控制臺中的輸出如下：

//Child.js
class Child extends React.Component {
  render() {
    console.log("Child render");
    return (
      <div>
        <h2>Name: {this.props.name}</h2>
      </div>
    );
  }
}

export default Child;

對於第一次渲染，它會調(diào)用父組件和子組件的render方法。

在每次遞增的後續(xù)重新渲染中，只調(diào)用父組件的render函數(shù)。子組件不會重新渲染。

實現(xiàn)函數(shù)式組件中的記憶化

要在函數(shù)式React組件中實現(xiàn)記憶化，我們將使用React.memo()。 React.memo()是一個高階組件（HOC），它與PureComponent執(zhí)行類似的工作，避免不必要的重新渲染。

以下是函數(shù)式組件的代碼：

<code>Parent render
Child render
Parent render
Child render
Parent render
Child render</code>

我們還將父組件轉(zhuǎn)換為函數(shù)式組件，如下所示：

//Child.js
class Child extends React.PureComponent { // 將React.Component更改為React.PureComponent
  render() {
    console.log("Child render");
    return (
      <div>
        <h2>Name: {this.props.name}</h2>
      </div>
    );
  }
}

export default Child;

此示例的完整代碼可在以下sandbox中看到：[此處應嵌入CodeSandbox鏈接]

現(xiàn)在，當我們在父組件中遞增count時，控制臺會輸出以下內(nèi)容：

<code>Parent render
Child render
Parent render
Parent render</code>

React.memo()對函數(shù)prop的問題

在上面的示例中，我們看到當我們對子組件使用React.memo() HOC時，即使父組件也重新渲染，子組件也不會重新渲染。

但是，需要注意的一個小問題是，如果我們將函數(shù)作為prop傳遞給子組件，即使使用了React.memo()，子組件也會重新渲染。讓我們來看一個例子。

我們將更改父組件，如下所示。在這裡，我們添加了一個處理程序函數(shù)，我們將其作為props傳遞給子組件：

//Child.js
export function Child(props) {
  console.log("Child render");
  return (
    <div>
      <h2>Name: {props.name}</h2>
    </div>
  );
}

export default React.memo(Child); // 在此處為子組件添加HOC以進行記憶化

子組件代碼保持不變。我們沒有使用作為props傳遞的函數(shù)在子組件中：

//Parent.js
import React, { useState } from 'react';
import Child from './Child';

export default function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  console.log("Parent render");
  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      <h2>Count: {count}</h2>
      <Child name={"joe"} />
    </div>
  );
}

現(xiàn)在，當我們在父組件中遞增count時，它會重新渲染並重新渲染子組件，即使props沒有更改。

那麼，是什麼導致子組件重新渲染的呢？答案是，每次父組件重新渲染時，都會創(chuàng)建一個新的處理程序函數(shù)並將其傳遞給子組件?，F(xiàn)在，由於處理程序函數(shù)在每次重新渲染時都會重新創(chuàng)建，因此子組件在對props進行淺比較時會發(fā)現(xiàn)處理程序引用已更改，並重新渲染子組件。

在下一節(jié)中，我們將看到如何解決此問題。

useCallback()以避免進一步重新渲染

導致子組件重新渲染的主要問題是處理程序函數(shù)的重新創(chuàng)建，這改變了傳遞給子組件的引用。因此，我們需要一種方法來避免這種重新創(chuàng)建。如果處理程序沒有重新創(chuàng)建，則對處理程序的引用不會更改——因此子組件不會重新渲染。

為了避免每次父組件渲染時都重新創(chuàng)建函數(shù)，我們將使用一個名為useCallback()的React鉤子。鉤子是在React 16中引入的。要了解有關鉤子的更多信息，您可以查看React的官方鉤子文檔，或查看“React Hooks：如何入門和構建您自己的”。

useCallback()鉤子接受兩個參數(shù)：回調(diào)函數(shù)和依賴項列表。

考慮以下useCallback()示例：

//Parent.js
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState((prevState) => {
      return { count: prevState.count + 1 };
    });
  };

  render() {
    console.log("Parent render");
    return (
      <div className="App">
        <button onClick={this.handleClick}>Increment</button>
        <h2>Count: {this.state.count}</h2>
        <Child name={"joe"} />
      </div>
    );
  }
}

export default Parent;

在這裡，useCallback()被添加到handleClick()函數(shù)中。第二個參數(shù)[x,y]可以是一個空數(shù)組、一個依賴項或一個依賴項列表。每當?shù)诙€參數(shù)中提到的任何依賴項發(fā)生更改時，才會重新創(chuàng)建handleClick()函數(shù)。

如果useCallback()中提到的依賴項沒有更改，則返回回調(diào)函數(shù)（作為第一個參數(shù)）的記憶化版本。我們將更改我們的父函數(shù)式組件以對傳遞給子組件的處理程序使用useCallback()鉤子：

（此處與原文類似，只是對語言和表達方式進行了一些調(diào)整，並保持了圖片位置和格式不變。由於無法訪問外部網(wǎng)站，我無法提供CodeSandbox鏈接。）

注意事項

記憶化是通過避免在組件的props或state沒有更改時不必要地重新渲染組件來提高React應用程序性能的好技術。您可能會想到只為所有組件添加記憶化，但這並不是構建React組件的好方法。您應該僅在組件滿足以下條件時才使用記憶化：

• 給定相同的props時返回相同的輸出
• 具有多個UI元素，並且虛擬DOM檢查會影響性能
• 經(jīng)常提供相同的props

總結(jié)

在本教程中，我們已經(jīng)看到了：

• React如何渲染UI
• 為什麼需要記憶化
• 如何通過React.memo()為函數(shù)式React組件和React.PureComponent為類組件在React中實現(xiàn)記憶化
• 一個用例，即使在使用React.memo()之後，子組件也會重新渲染
• 如何使用useCallback()鉤子來避免在將函數(shù)作為props傳遞給子組件時重新渲染。

希望您覺得這篇關於React記憶化的介紹有用！

關於React記憶化的常見問題解答（FAQ）

（此處與原文類似，只是對語言和表達方式進行了一些調(diào)整。）

以上是如何在REACT中實施回憶以提高性能的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！