追蹤使用 useRef() 渲染元件的次數 - React

首先讓我們想想初學者如何嘗試解決這個問題。

如果您願意，可以按照以下步驟操作，建立一個新的React 項目，並將這麼多程式碼放入您的App.jsx 或您選擇的任何元件中，並刪除index.css 和App.css 中的所有內容：

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

現在預覽如下：

在上面的程式碼中，我建立了一個名為 count 的狀態變量，點擊按鈕時該變數會增加 1。這裡的計數是一個額外的狀態變量，它在這裡不做任何事情，但它會幫助您更好地理解事情。如果您以前在 React 中編寫過程式碼，那麼這段程式碼不應該讓您感到不知所措。

那麼，讓我們進入主要部分......

1. 使用狀態變數

這是我們大多數人想到的第一種方法，例如創建一個狀態變量，將其初始化為 0，並在每次組件渲染時將其遞增 1。

您的應用程式元件將如下所示：

function App() {
  const [count, setCount] = useState(0);
  const [numberOfTimesRendered, setNumberOfTimesRendered] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
    setNumberOfTimesRendered(numberOfTimesRendered + 1);
  };

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

這種方法在這裡可以很好地工作，但它有很多缺陷。理想情況下，當我們單擊“強制渲染”按鈕時，元件不會僅渲染一次。當我們單擊按鈕時，計數值會增加 1，這會導致元件重新渲染，因為我們都知道任何狀態變數的變更都會導致元件重新渲染。但在 setCount(count 1) 重新渲染後確實到此結束，setNumberOfTimesRendered(numberOfTimesRendered 1) 會被觸發並導致元件再次渲染。

numberOfTimesRendered 值增加1，但每次我們點擊「強制渲染」按鈕時，元件都會渲染兩次，這說明了為什麼在這種情況下使用狀態變數不是最好的方法，而是最糟糕的方法。

2. 使用全域變數

人們可以想到的另一種方法是在元件生命週期之外定義一個全域變量，並在元件重新渲染時將其加 1，如下所示：

let numberOfTimesRendered = 0;

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  numberOfTimesRendered += 1;

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

這種方法可以正常工作，並且不會導致任何額外的渲染，這似乎是最好的解決方案，但事實並非如此，因為您不應該在元件生命週期之外定義任何內容。

3. 使用局部變數

人們也可以想到與上面相同的方法，但在組件內部使用局部變量，但讓我告訴你，沒有比這更糟糕的方法了，因為每次組件渲染時，局部變量都會重新初始化為0而我們每次都會失去之前的渲染。

4. 使用 useRef() 鉤子

現在讓我們使用 useRef() 來實現它。

我們大多數人都知道 useRef 是一個鉤子，用於引用 dom 內的元素並手動操作它們，但 useRef 不僅限於此。它還可以保存值，並可用於在元件渲染生命週期中保持變數的持久性。

如果您在 useRef 中儲存一個值，它將不會受到 React 元件渲染生命週期的影響，該值將在任何數量的重新渲染中保持持久性。實作將如下所示：

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

numberOfTimesRendered.current 給出儲存在引用變數中的目前值。這種方法不會導致任何額外的重新渲染，並不是說它是最好的，而是據我所知是最優化的方法之一。

---

本文到此結束。歡迎回饋，如果您需要進一步說明，請在下面發表評論，我會盡力幫助您。

在 X 和 LinkedIn 上與我聯絡！ ？ ✨

以上是追蹤使用 useRef() 渲染元件的次數 - React的詳細內容。更多資訊請關注PHP中文網其他相關文章！