快捷導航

React?Hook中的useEffecfa函數(shù)的使用小結(jié)

更新時間：2022年11月03日 11:12:07 作者：藍桉cyq

React 會在組件更新和卸載的時候執(zhí)行清除操作, 將上一次的監(jiān)聽取消掉, 只留下當前的監(jiān)聽，這篇文章主要介紹了React?Hook?useEffecfa函數(shù)的使用細節(jié)詳解,需要的朋友可以參考下

useEffect的詳細解析

useEffecf基本使用

書接上文, 上一篇文章我們講解了State Hook, 我們已經(jīng)可以通過這個hook在函數(shù)式組件中定義state

我們知道在類組件中是可以有生命周期函數(shù)的, 那么如何在函數(shù)組件中定義類似于生命周期這些函數(shù)呢?

Effect Hook 可以讓你來完成一些類似于class中生命周期的功能;

事實上，類似于網(wǎng)絡(luò)請求、手動更新DOM、一些事件的監(jiān)聽，都是React更新DOM的一些副作用(Side Effects);

所以對于完成這些功能的Hook被稱之為 Effect Hook;

假如我們現(xiàn)在有一個需求:頁面中的title總是顯示counter的數(shù)字，分別使用class組件和Hook實現(xiàn):

類組件實現(xiàn)

import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      counter: 100
    }
  }

  // 進入頁面時, 標題顯示counter
  componentDidMount() {
    document.title = this.state.counter
  }

  // 數(shù)據(jù)發(fā)生變化時, 讓標題一起變化
  componentDidUpdate() {
    document.title = this.state.counter
  }

  render() {
    const { counter } = this.state

    return (
      <div>
        <h2>{counter}</h2>
        <button onClick={() => this.setState({counter: counter+1})}>+1</button>
      </div>
    )
  }
}

export default App

函數(shù)組件加Hook的實現(xiàn):

通過useEffect這個Hook，可以告訴React需要在渲染后執(zhí)行某些操作;
useEffect要求我們傳入一個回調(diào)函數(shù)，在React執(zhí)行完更新DOM操作之后(也就是組件被渲染完成后)，就會回調(diào)這個函數(shù);
默認情況下，無論是第一次渲染之后，還是每次更新之后，都會執(zhí)行這個回調(diào)函數(shù); 一般情況下我們在該回調(diào)函數(shù)中都是編寫副作用的操作(例如網(wǎng)絡(luò)請求, 操作DOM, 事件監(jiān)聽)
因此需要注意的是, 有許多說法說useEffect就是用來模擬生命周期的, 其實并不是; useEffect可以做到模擬生命周期, 但是他主要的作用是用來執(zhí)行副作用的

因此需要注意的是, 有許多說法說useEffect就是用來模擬生命周期的, 其實并不是; useEffect可以做到模擬生命周期, 但是他主要的作用是用來執(zhí)行副作用的

import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [counter, setCounter] = useState(200)

  // useEffect傳入一個回調(diào)函數(shù), 在頁面渲染完成后自動執(zhí)行
  useEffect(() => {
    // 一般在該回調(diào)函數(shù)在編寫副作用的代碼(網(wǎng)絡(luò)請求, 操作DOM, 事件監(jiān)聽)
    document.title = counter
  })

  return (
    <div>
      <h2>{counter}</h2>
      <button onClick={() => setCounter(counter+1)}>+1</button>
    </div>
  )
})

export default App

清除副作用(Effect)

在class組件的編寫過程中，某些副作用的代碼，我們需要在componentWillUnmount中進行清除:

比如我們之前的事件總線或Redux中手動調(diào)用subscribe;

都需要在componentWillUnmount有對應(yīng)的取消訂閱;

Effect Hook通過什么方式來模擬componentWillUnmount呢?

useEffect傳入的回調(diào)函數(shù)A本身可以有一個返回值，這個返回值是另外一個回調(diào)函數(shù)B:

type EffectCallback = () => (void | (() => void | undefined));

為什么要在 effect 中返回一個函數(shù)?

這是 effect 可選的清除機制。每個 effect 都可以返回一個清除函數(shù);

如此可以將添加和移除訂閱的邏輯放在一起;

它們都屬于 effect 的一部分;

React 何時清除 effect?

React 會在組件更新和卸載的時候執(zhí)行清除操作, 將上一次的監(jiān)聽取消掉, 只留下當前的監(jiān)聽 ;

正如之前學到的，effect 在每次渲染的時候都會執(zhí)行;

import React, { memo, useEffect } from 'react'

const App = memo(() => {
  useEffect(() => {
    // 監(jiān)聽store數(shù)據(jù)發(fā)生改變
    const unsubscribe = store.subscribe(() => {

    })

    // 返回值是一個回調(diào)函數(shù), 該回調(diào)函數(shù)在組件重新渲染或者要卸載時執(zhí)行
    return () => {
      // 取消監(jiān)聽操作
      unsubscribe()
    }
  })

  return (
    <div>
      <h2>App</h2>
    </div>
  )
})

export default App

使用多個useEffect

使用Hook的其中一個目的就是解決class中生命周期經(jīng)常將很多的邏輯放在一起的問題:

比如網(wǎng)絡(luò)請求、事件監(jiān)聽、手動修改DOM，這些往往都會放在componentDidMount中;

一個函數(shù)組件中可以使用多個Effect Hook，我們可以將邏輯分離到不同的useEffect中:

import React, { memo, useEffect } from 'react'

const App = memo(() => {
  // 監(jiān)聽的useEffect
  useEffect(() => {
    console.log("監(jiān)聽的代碼邏輯")

    return () => {
      console.log("取消的監(jiān)聽代碼邏輯")
    }
  })

  // 發(fā)送網(wǎng)絡(luò)請求的useEffect
  useEffect(() => {
    console.log("網(wǎng)絡(luò)請求的代碼邏輯")
  })

  // 操作DOM的useEffect
  useEffect(() => {
    console.log("操作DOM的代碼邏輯")
  })

  return (
    <div>
      App
    </div>
  )
})

export default App

Hook允許我們按照代碼的用途分離它們，而不是像生命周期函數(shù)那樣, 將很多邏輯放在一起:

React將按照 effect 聲明的順序依次調(diào)用組件中的每一個 effect;

useEffect性能優(yōu)化

默認情況下，useEffect的回調(diào)函數(shù)會在每次渲染時都重新執(zhí)行，但是這會導致兩個問題:

某些代碼我們只是希望執(zhí)行一次即可(比如網(wǎng)絡(luò)請求, 組件第一次渲染中執(zhí)行一次即可, 不需要執(zhí)行多次)，類似于類組件中的componentDidMount和componentWillUnmount中完成的事情;

另外，多次執(zhí)行也會導致一定的性能問題;

我們?nèi)绾螞Q定useEffect在什么時候應(yīng)該執(zhí)行和什么時候不應(yīng)該執(zhí)行呢?

useEffect實際上有兩個參數(shù):

參數(shù)一: 執(zhí)行的回調(diào)函數(shù), 這個參數(shù)我們已經(jīng)使用過了不再多說;
參數(shù)二: 是一個數(shù)組類型, 表示該useEffect在哪些state發(fā)生變化時，才重新執(zhí)行;(受誰的影響才會重新執(zhí)行)

案例練習:

受count影響的Effect;

import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 發(fā)送網(wǎng)絡(luò)請求的useEffect, 只有在counter發(fā)生改變時才會重新執(zhí)行
  useEffect(() => {
    console.log("網(wǎng)絡(luò)請求的代碼邏輯")
  }, [counter])

  return (
    <div>
      <h2 onClick={() => setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

但是，如果一個函數(shù)我們不希望依賴任何的內(nèi)容時，也可以傳入一個空的數(shù)組 []:

那么這里的兩個回調(diào)函數(shù)分別對應(yīng)的就是componentDidMount和componentWillUnmount生命周期函數(shù)了;

import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 傳入空數(shù)組表示不受任何數(shù)據(jù)依賴
  useEffect(() => {
    // 此時傳入的參數(shù)一這個回調(diào)函數(shù): 相當于componentDidMount
    console.log("監(jiān)聽的代碼邏輯")

    // 參數(shù)一這個回調(diào)函數(shù)的返回值: 相當于componentWillUnmount
    return () => {
      console.log("取消的監(jiān)聽代碼邏輯")
    }
  }, [])

  return (
    <div>
      <h2 onClick={() => setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

總結(jié): useEffect可以模擬之前的class組件的生命周期(類似而不是相等), 并且它比原來的生命周期更加強大, 青出于藍而勝于藍

到此這篇關(guān)于React Hook useEffecfa函數(shù)的使用細節(jié)詳解的文章就介紹到這了,更多相關(guān)React Hook useEffecfa函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: