useEffect

useEffect是一個(gè)React Hook函數(shù)，用于在React組件中創(chuàng)建不是由事件引起而是由渲染本身引起的操作（副作用）, 比 如發(fā)送AJAX請(qǐng)求，更改DOM等等

示意圖

基礎(chǔ)使用

組件渲染完畢之后，立刻從服務(wù)端獲取平道列表數(shù)據(jù)并顯示到頁(yè)面中

useEffect(() => { }, [])

1. 參數(shù)1是一個(gè)函數(shù)，可以把它叫做副作用函數(shù)，在函數(shù)內(nèi)部可以放置要執(zhí)行的操作
2. 參數(shù)2是一個(gè)數(shù)組（可選參），在數(shù)組里放置依賴項(xiàng)，不同依賴項(xiàng)會(huì)影響第一個(gè)參數(shù)函數(shù)的執(zhí)行，當(dāng)是一個(gè)空數(shù)組的時(shí)候，副作用函數(shù)只會(huì)在組件渲染完畢之后執(zhí)行一次
   demo:

import { useEffect, useState } from "react"

const URL = 'http://xxxxxxxxxxxxxxxx'

function App() {
  // 創(chuàng)建一個(gè)狀態(tài)數(shù)據(jù)
  const [list, setList] = useState([])
  useEffect(() => {
    // 額外的操作 獲取頻道列表
    async function getList() {
      const res = await fetch(URL)
      const jsonRes = await res.json()
      console.log(jsonRes)
      setList(jsonRes.data.channels)
    }
    getList()
  }, [])
  return (
    <div>
      this is app
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  )
}

export default App

image.png

useEffect依賴說明

eEffect副作用函數(shù)的執(zhí)行時(shí)機(jī)存在多種情況，根據(jù)傳入依賴項(xiàng)的不同，會(huì)有不同的執(zhí)行表現(xiàn)

• 1. 沒有依賴項(xiàng) 初始 + 組件更新

import { useEffect, useState } from "react"
function App () {
  // 1. 沒有依賴項(xiàng)  初始 + 組件更新
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('副作用函數(shù)執(zhí)行了')
  })
  return (
    <div>
      this is app
      <button onClick={() => setCount(count + 1)}>+{count}</button>
    </div>
  )
}
export default App

image.png

• 2. 傳入空數(shù)組依賴 初始執(zhí)行一次

import { useEffect, useState } from "react"

function App () {
  const [count, setCount] = useState(0)
  // 2. 傳入空數(shù)組依賴  初始執(zhí)行一次
  useEffect(() => {
    console.log('副作用函數(shù)執(zhí)行了')
  }, [])
  return (
    <div>
      this is app
      <button onClick={() => setCount(count + 1)}>+{count}</button>
    </div>
  )
}

export default App

image.png

只在初始的時(shí)候執(zhí)行了1次

• 3. 傳入特定依賴項(xiàng) 初始 + 依賴項(xiàng)變化時(shí)執(zhí)行

import { useEffect, useState } from "react"
function App () {
  const [count, setCount] = useState(0)
  // 3. 傳入特定依賴項(xiàng)  初始 + 依賴項(xiàng)變化時(shí)執(zhí)行
  useEffect(() => {
    console.log('副作用函數(shù)執(zhí)行了')
  }, [count])
  return (
    <div>
      this is app
      <button onClick={() => setCount(count + 1)}>+{count}</button>
    </div>
  )
}

export default App

image.png

清除副作用

在useEffect中編寫的由渲染本身引起的對(duì)接組件外部的操作，社區(qū)也經(jīng)常把它叫做副作用操作，比如在useEffect中開啟了一個(gè)定時(shí)器，我們想在組件卸載時(shí)把這個(gè)定時(shí)器再清理掉，這個(gè)過程就是清理副作用

image.png

:::
說明：清除副作用的函數(shù)最常見的執(zhí)行時(shí)機(jī)是在組件卸載時(shí)自動(dòng)執(zhí)行
:::

import { useEffect, useState } from "react"

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

    return () => {
      // 清除副作用(組件卸載時(shí))
      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