React 《useEffect》

一个小笨蛋發表於2024-04-27
React

概念

useEffect是一個React Hook函式，用於在React元件中建立不是由事件引起而是由渲染本身引起的操作（副作用）, 比 如傳送AJAX請求，更改DOM等等
image
:::warning
說明：上面的元件中沒有發生任何的使用者事件，元件渲染完畢之後就需要和伺服器要資料，整個過程屬於“只由渲染引起的操作”
:::

基礎使用

需求：在元件渲染完畢之後，立刻從服務端獲取平道列表資料並顯示到頁面中

image
說明：

  1. 引數1是一個函式，可以把它叫做副作用函式，在函式內部可以放置要執行的操作
  2. 引數2是一個陣列（可選參），在陣列裡放置依賴項，不同依賴項會影響第一個引數函式的執行，當是一個空陣列的時候，副作用函式只會在元件渲染完畢之後執行一次
    :::warning
    介面地址：http://geek.itheima.net/v1_0/channels
    :::

useEffect依賴說明

useEffect副作用函式的執行時機存在多種情況，根據傳入依賴項的不同，會有不同的執行表現

依賴項 副作用功函式的執行時機
沒有依賴項 元件初始渲染 + 元件更新時執行
空陣列依賴 只在初始渲染時執行一次
新增特定依賴項 元件初始渲染 + 依賴項變化時執行
image

清除副作用

概念：在useEffect中編寫的由渲染本身引起的對接元件外部的操作，社群也經常把它叫做副作用操作，比如在useEffect中開啟了一個定時器，我們想在元件解除安裝時把這個定時器再清理掉，這個過程就是清理副作用

image
:::warning
說明：清除副作用的函式最常見的執行時機是在元件解除安裝時自動執行
:::

import { useEffect, useState } from "react"

function Son () {
  // 1. 渲染時開啟一個定時器
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定時器執行中...')
    }, 1000)

    return () => {
      // 清除副作用(元件解除安裝時)
      clearInterval(timer)
    }
  }, [])
  return <div>this is son</div>
}

function App () {
  // 透過條件渲染模擬元件解除安裝
  const [show, setShow] = useState(true)
  return (
    <div>
      {show && <Son />}
      <button onClick={() => setShow(false)}>解除安裝Son元件</button>
    </div>
  )
}

export default App

相關文章