ReactJS - PureComponent 類

眾所周知，React 是一個非常流行的用於建立互動式使用者介面的 JS 庫。它完全基於元件。因此，React 中存在一種稱為 PureComponent 的元件型別。它與 Component 非常相似，但是它避免了對於相同的 props 和 state 的重新渲染。

語法

class MyComponent extends PureComponent {
   render() {
      return <h1>Hiii, {this.props.name}!</h1>;
   }
}

我們可以在上面的程式碼示例中看到。我們擴充套件了 PureComponent 來代替 Component。我們通常擴充套件 Components。因此，為了避免為相同的 props 和 state 重新渲染類元件，我們可以擴充套件 PureComponent。

React 中的 PureComponent 只是常規 Component 的增強版。它能夠執行 Component 的所有功能。PureComponent 的主要優點是它會在重新渲染之前檢查以驗證 props 和 state 是否已更改。

PureComponent 類似於自定義的“shouldComponentUpdate”方法。“shouldComponentUpdate”方法的作用是確定是否應該更新元件。但是 PureComponent 自動執行此檢查，只關注資料的更改，這可以幫助我們的應用程式更有效地執行。

如何使用它？

當元件的父元件在 React 中發生變化時，子元件通常會更新或重新渲染。即使傳輸到子元件的新資料與舊資料相同，也會發生這種情況。

但是，React 提供了一種最佳化來避免低效的重新渲染。我們可以建立一個元件，只要它接收到的新 props 和 state 等於我們擁有的舊資料，它就不會在父元件更改時重新渲染。

如果我們在 React 中使用類元件，我們可以透過使我們的元件副檔名為“PureComponent”的類來啟用此最佳化。這告訴 React 只有當它接收到的資料實際發生更改時才重新渲染元件。

示例

示例 - 計數器應用

在此，我們將使用 PureComponent 建立一個簡單的計數器應用程式來演示它如何最佳化渲染：

• 因此，我們將有一個擴充套件 PureComponent 的 Counter 元件。

• 我們將在 MyApp 元件中顯示當前計數值。

• 每次我們點選“遞增”按鈕時，計數器都會遞增，並且計數器元件只有在 count prop 發生更改後才會更新。

• 此程式碼解釋了 PureComponent 如何檢查 prop 值在重新渲染之前是否已更改，以便最佳化渲染。

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

class Counter extends PureComponent {
   render() {
      console.log("Counter was rendered at", new Date().toLocaleTimeString());
      return <div>Count: {this.props.count}</div>;
   }
}
export default function MyApp() {
   const [count, setCount] = useState(0);
   const increment = () => {
      setCount(count + 1);
   };
   return (
      <>
         <button onClick={increment}>Increment</button>
         <Counter count={count} />
      </>
   );
}

輸出

示例 - 列表元件

讓我們使用 PureComponent 建立另一個 React 應用。在這個示例中，我們將有一個 ListComponent，它使用 PureComponent 渲染專案列表。我們有一個 ListComponent，它在其狀態中維護一個水果列表。該元件渲染一系列 ListItem 元件，每個元件顯示一個水果。我們已為 ListItem 元件使用 PureComponent 來利用其自動檢查 prop 更改的功能。

import React, { PureComponent } from 'react';
class ListItem extends PureComponent {
   render() {
      return <li> {this.props.value}</li>;
   }
}
class ListComponent extends PureComponent {
   constructor(props) {
      super(props);
      this.state = {
         items: ['Apple', 'Banana', 'Orange'],
      };
   }
   render() {
      return (
         <div>
            <h2>Fruit List:</h2>
            <ul> {
               this.state.items.map((item, index) => (
                  <ListItem key={index} value={item} />
               ))
            }
            </ul>
         </div>
      );
   }
}

export default ListComponent;

輸出

此示例顯示了在處理專案列表或陣列時 PureComponent 如何有用，因為它有助於避免在資料保持不變時不必要的重新渲染。

示例 - 使用 PureComponent

此 React 應用包含兩個元件：ParentComponent 和 ChildComponent。此應用程式的主要目標是展示 PureComponent 在最佳化 React 應用程式中的渲染方面的用途。

import React, { PureComponent } from 'react';

class ChildComponent extends PureComponent {
   render() {
      return <h1>Hello, {this.props.name}!</h1>;
   }
}
class ParentComponent extends PureComponent {
   constructor(props) {
      super(props);
      this.state = {
         name: 'John',
      };
   }   
   render() {
      return <ChildComponent name={this.state.name} />;
   }
}

export default ParentComponent;

輸出

總結

PureComponent 是一個改進我們應用程式的 React 工具。它確保我們的程式中的元件僅在必要時更新。這可以幫助我們的軟體更有效地執行並更快地響應使用者輸入。