ReactJS - useLayoutEffect Hook

---

---

新的 Hook `useLayoutEffect` 在 React 18 版本中引入。這個 Hook 可以傳遞到元件的渲染函式中，強制 React 庫考慮頁面的佈局並調整其對間距和溢位等內容的計算。

簡單來說，當我們需要檢查網頁不同元素的外觀並根據發現的內容進行更改時，它非常有用。它執行速度很快，允許在網頁視覺更新之前進行更改。這有助於創造更流暢、更響應迅速的使用者體驗。就其執行時間而言，它類似於 `componentDidMount` 和 `componentDidUpdate` 方法，只是它適用於 React 中的函式元件，而不是類元件。它確保在瀏覽器顯示更新之前進行更改。

語法

useLayoutEffect(setup, deps)

引數

• setup − 這是你放置程式碼的地方，這些程式碼會在你的 React 元件新增到網頁時執行。

• deps − 依賴項充當我們 setup 程式碼所依賴的元素的清單。它可以是來自元件外部的任何內容，例如資訊、資料或我們在元件內生成的內容。

返回值

它返回 undefined。

如何使用它？

React 中的 `useLayoutEffect` Hook 接受兩個引數。第一個引數是 effect 函式，第二個引數是依賴項陣列。第一個引數 effect 通常是 undefined 或返回一個清理函式。`useLayoutEffect` 函式簽名如下所示：

import React, { useLayoutEffect } from "react";
const App = props => {
   useLayoutEffect(() => {
      
      //Perform an action and either return undefined or clean up function.
      return () => {
         //Do  clean up here
      };
   }, [dependencies]);
}; 

`useLayoutEffect` Hook 是一個強大的 React 元件，允許我們直接控制渲染時輸入焦點的位置。此功能可用於實現各種使用者互動，從隱藏資訊到建立下拉選單。它允許我們僅用一行程式碼完全自定義幕後發生的事情。

示例

示例 - 簡易使用者輸入應用

此應用包含一個簡單的輸入欄位。當我們輸入時，輸入的值會立即記錄。它使用 `React.useLayoutEffect` 即時捕獲和顯示輸入值，提供與使用者輸入的動態互動。

import React from "react";

function App() {
   const [value, setValue] = React.useState("");   
   React.useLayoutEffect(() => {
      console.log("Input value: ", value);
   }, [value]);
   
   return (
      <div>
         <input
         type="text"
         value={value}
         onChange={(e) => setValue(e.target.value)}
         />
         <p>You typed: {value}</p>
      </div>
   );
}

export default App;

輸出

示例 - 切換按鈕應用

在此應用中，我們將有一個按鈕來切換線上和離線狀態。當前線上狀態使用 `React.useLayoutEffect` 記錄，並相應地顯示訊息。因此，此應用的程式碼如下：

import React from "react";

function App() {
   const [isOnline, setOnline] = React.useState(true);   
   React.useLayoutEffect(() => {
      console.log("Online status: ", isOnline ? "Online" : "Offline");
   }, [isOnline]);
   
   return (
      <div>
         <h2>{isOnline ? "You are online" : "You are offline"}</h2>
         <button onClick={() => setOnline(!isOnline)}>
            Toggle Online Status
         </button>
      </div>
   );
}

export default App;

輸出

示例 - 計數器應用

讓我們看看一個使用 `useLayoutEffect` 的簡單計數器應用程式，它在單擊按鈕時遞增計數，並使用 effect hook 在控制檯中列印值。

import React from "react";

function App() {
   const [count, setCount] = React.useState(0); // Initialize with a number   
   React.useLayoutEffect(() => {
      console.log(count);
   }, [count]);
   
   return (
      <div>
         <h1>The count is {count} </h1>
         <button onClick={() => setCount(count + 1)}>Click here</button>
      </div>
   );
}

export default App;

輸出

此程式碼是一個 React 元件，它使用 `useLayoutEffect` hook 跟蹤 count 狀態的值每當它發生變化時。它在網頁上顯示當前計數，並允許使用者透過單擊按鈕來增加它。

限制

• `useLayoutEffect` Hook 只能在元件的頂層或其他自定義 Hook 內使用。它不能在迴圈或條件內使用。如果我們需要在迴圈或條件中使用它，請建立一個單獨的元件並將 effect 放置在那裡。

• 當我們在開發模式下使用 React 的 Strict Mode 時，React 會執行額外的檢查以確保我們的清理程式碼與我們的 setup 程式碼匹配。如果因此遇到問題，請確保我們的清理程式碼正確撤消了我們的 setup 程式碼所做的操作。

• 如果我們的 effect 所依賴的任何專案是在我們的元件內生成的 object 或 function，則 effect 的執行頻率可能會高於必要頻率。為了解決這個問題，我們可以刪除不必要的 object 和 function 依賴項。