React 中的 UseEffect 幕後花絮

在進一步了解useEffect並深入了解react之前。我建議你熟悉一下 javascript 的這些概念。

https://www.geeksforgeeks.org/top-javascript-concepts-to-know-before-learning-react/

作為 React 開發者，最重要的概念之一就是了解 useEffect 的工作原理。

使用原理效果

UseEffect 用於在我們的 React 元件中執行副作用。

什麼是副作用？

副作用是指與 React 元件範圍之外的世界互動的任何操作。

當我們需要到達反應組件之外做某事時，我們會執行副作用！ ！

一些常見的副作用：

• 從 API 取得資料。
• 更新 DOM 文件和視窗。
• 定時器函數setTimeout和setInterval。

react中useEffect的簽章：

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

或僅適用於此程式碼：

useEffect(() => { 
    // execute side effect
})

在給了一些關於 useEffect 的基本理論之後，讓我們來看看一些實踐！ ！

一個使用 useEffect 的簡單範例：

import {useState, useEffect} from "react";

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

    useEffect(() => {
        document.title = `${count} new messages!`;
    })


    return (
        <>
            <h3>{ count } new Messages!</h3>   
            <button onClick={ () => setCount(count + 1) }>Increase</button>
        </>
  )
}

這段程式碼我們在做什麼？

• 元件最初渲染時計數設定為 0。

• useEffect 掛鉤將文件標題更新為「0 新訊息！」

點選按鈕時：

• 呼叫 setCount 函數，增加計數狀態。
• 元件使用更新後的計數值重新渲染。
• useEffect 鉤子再次觸發，更新文件標題以反映新的計數。
• 此程式碼示範了 React 中 useState 和 useEffect 掛鉤的基本用法，用於管理狀態和執行副作用，建立更新文件標題的簡單計數器。

useEffect 將隨著組件的每次變更而運作。

UseEffect 與空數組

我們將對程式碼做一些小改動：

  useEffect(() => {
        document.title = `${count} new messages!`;
        console.log('Run useEffect');
    }, [])

我們在 useEffect 的參數中新增一個空數組。

• 它只會在元件建立或初始化時運作。

當我們取得資料時它非常有用，在這種情況下我們知道我們應該只運行該部分程式碼一次。

useEffect 與變數

useEffect 的一種變體是增加一個變數（一個或多個）。
當此變數更改時，部分程式碼將運行。

讓我們來看一個例子：

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);
    const [newCount, setNewCount] = useState(5);

    useEffect(() => {
        document.title = `${newCount} new messages!`;
        console.log('Run useEffect');
    }, [newCount])


    return (
        <div>
           <>
              <h3>{ count } new Messages!</h3>   
              <button onClick={ () => setCount(count + 1) }>Increase</button>
          </>

          <>
              <h3>{ newCount } new Messages!</h3>   
              <button onClick={ () => setNewCount(newCount + 5) }>Increase</button>
          </>
        </div>

  )
}

我們新增了一個帶有 useState 的新變量，並且新增了依賴 newCount 的 useEffect。

在這種情況下將會渲染：

• 在元件的開頭將 newCount 設定為頁面標題。
• 偵測到 newCount 變數發生變化後。

注意：您可以新增逗號來傳遞更多變數

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

具有 cleanUp 功能的 UseEffect

在某些情況下，我們需要清理一些功能，例如承諾。

我們將透過一個例子深入探討它。

建立計時器並在頁面中顯示。

我們可以使用 setInterval 來做到這一點，但如果我們不實作清理，計時器將消耗資源並且應用程式會很慢。

所以我們必須回傳clearInterval。

這裡有程式碼。

useEffect(() => { 
    // execute side effect
})

結論：

關於 useEffect 的小簡介。

useEffect.-

UseEffect 用於在 React 元件中執行副作用。

副作用可能是：

• 從API取得資料
• 更新 dom - 文檔、視窗
• 計時器事件 - setInterval、setTimeOut

useEffect（回調，依賴項）

1 其中回呼是函數 - sideEffect 邏輯 - 運行什麼。
2 個依賴項 - 變數數組（可選） - 何時運行。

最後我們有 useEffect 的三種變體：

1. 不含依賴項的 UseEffect - 它在第一次渲染時運行，也可以在偵測到任何變更時運行。

2. UseEffect 與空數組 - 它僅在第一次渲染時運行。

3. 帶有變數的 UseEffect - 它在第一次渲染時運行並在變數更改時運行。

4. 具有清理功能的 UseEffect - 逾時、訂閱、事件偵聽器或其他取消訂閱或使用後不再需要的功能可以透過清理功能進行處理。

以上是React 中的 UseEffect 幕後花絮的詳細內容。更多資訊請關注PHP中文網其他相關文章！