您可能不知道的 useState 效能技巧

假設我們有一個包含 useState 的 React 元件。

const expensiveCalculation = () => {
  // ...
}

export default function AboutPage() {
  const [state, setState] = useState(expensiveCalculation())

    return (
      // ...
    );
  }

我們用昂貴的計算函數的結果啟動狀態。
每次元件重新渲染時，函數 costlyCalculation 都會運行，即使我們只需要它的結果作為 useState 的初始值。該函數的結果將不會被使用。

為了避免重新渲染期間昂貴的計算，請傳遞函數本身而不呼叫它。 React 足夠智能，可以在掛載時呼叫函數本身，而不是每次渲染時都呼叫函數本身。

const expensiveCalculation = () => {
  // ...
}

export default function AboutPage() {
  const [state, setState] = useState(expensiveCalculation)

    return (
      // ...
    );
  }

以上是您可能不知道的 useState 效能技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！