淺析React Hook中useEffecfa函數的使用

本篇文章給大家介紹一下React Hook中的useEffecfa函數，聊聊useEffecfa函數的使用細節，希望對大家有所幫助！

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

useEffect的詳細解析

useEffecf基本使用

書接上文, 上一篇文章我們講解了State Hook, 我們已經可以通過這個hook在函數式元件中定義state。【相關推薦：Redis視訊教學、】

我們知道在類元件中是可以有生命週期函數的, 那麼如何在函陣列件中定義類似於生命週期這些函數呢?

Effect Hook 可以讓你來完成一些類似於class中生命週期的功能;
事實上，類似於網路請求、手動更新DOM、一些事件的監聽，都是React更新DOM的一些副作用(Side Effects);
所以對於完成這些功能的Hook被稱之為 Effect Hook;

假如我們現在有一個需求:頁面中的title總是顯示counter的數位，分別使用class元件和Hook實現:

類元件實現

import React, { PureComponent } from 'react'

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

    this.state = {
      counter: 100
    }
  }

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

  // 資料發生變化時, 讓標題一起變化
  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
登入後複製

函陣列件加Hook的實現:
通過useEffect這個Hook，可以告訴React需要在渲染後執行某些操作;
useEffect要求我們傳入一個回撥函數，在React執行完更新DOM操作之後(也就是元件被渲染完成後)，就會回撥這個函數;
預設情況下，無論是第一次渲染之後，還是每次更新之後，都會執行這個回撥函數; 一般情況下我們在該回撥函數中都是編寫副作用的操作(例如網路請求, 操作DOM, 事件監聽)
因此需要注意的是, 有許多說法說useEffect就是用來模擬生命週期的, 其實並不是; useEffect可以做到模擬生命週期, 但是他主要的作用是用來執行副作用的

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

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

  // useEffect傳入一個回撥函數, 在頁面渲染完成後自動執行
  useEffect(() => {
    // 一般在該回撥函數在編寫副作用的程式碼(網路請求, 操作DOM, 事件監聽)
    document.title = counter
  })

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

export default App
登入後複製

清除副作用(Effect)

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

比如我們之前的事件匯流排或Redux中手動呼叫subscribe;
都需要在componentWillUnmount有對應的取消訂閱;
Effect Hook通過什麼方式來模擬componentWillUnmount呢?

useEffect傳入的回撥函數A本身可以有一個返回值，這個返回值是另外一個回撥函數B:

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

為什麼要在 effect 中返回一個函數?

這是 effect 可選的清除機制。每個 effect 都可以返回一個清除函數;
如此可以將新增和移除訂閱的邏輯放在一起;
它們都屬於 effect 的一部分;

React 何時清除 effect?

React 會在元件更新和解除安裝的時候執行清除操作, 將上一次的監聽取消掉, 只留下當前的監聽 ;
正如之前學到的，effect 在每次渲染的時候都會執行;

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

const App = memo(() => {
  useEffect(() => {
    // 監聽store資料發生改變
    const unsubscribe = store.subscribe(() => {

    })

    // 返回值是一個回撥函數, 該回撥函數在元件重新渲染或者要解除安裝時執行
    return () => {
      // 取消監聽操作
      unsubscribe()
    }
  })

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

export default App
登入後複製

使用多個useEffect

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

比如網路請求、事件監聽、手動修改DOM，這些往往都會放在componentDidMount中;

一個函陣列件中可以使用多個Effect Hook，我們可以將邏輯分離到不同的useEffect中:

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

const App = memo(() => {
  // 監聽的useEffect
  useEffect(() => {
    console.log("監聽的程式碼邏輯")

    return () => {
      console.log("取消的監聽程式碼邏輯")
    }
  })

  // 傳送網路請求的useEffect
  useEffect(() => {
    console.log("網路請求的程式碼邏輯")
  })

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

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

export default App
登入後複製

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

React將按照 effect 宣告的順序依次呼叫元件中的每一個 effect;

useEffect效能優化

預設情況下，useEffect的回撥函數會在每次渲染時都重新執行，但是這會導致兩個問題:

某些程式碼我們只是希望執行一次即可(比如網路請求, 元件第一次渲染中執行一次即可, 不需要執行多次)，類似於類元件中的componentDidMount和componentWillUnmount中完成的事情;
另外，多次執行也會導致一定的效能問題;

我們如何決定useEffect在什麼時候應該執行和什麼時候不應該執行呢?

useEffect實際上有兩個引數:
引數一: 執行的回撥函數, 這個引數我們已經使用過了不再多說;
引數二: 是一個陣列型別, 表示該useEffect在哪些state發生變化時，才重新執行;(受誰的影響才會重新執行)

案例練習:

受count影響的Effect;

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

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 傳送網路請求的useEffect, 只有在counter發生改變時才會重新執行
  useEffect(() => {
    console.log("網路請求的程式碼邏輯")
  }, [counter])

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

export default App
登入後複製

但是，如果一個函數我們不希望依賴任何的內容時，也可以傳入一個空的陣列 []:

那麼這裡的兩個回撥函數分別對應的就是componentDidMount和componentWillUnmount生命週期函數了;

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

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 傳入空陣列表示不受任何資料依賴
  useEffect(() => {
    // 此時傳入的引數一這個回撥函數: 相當於componentDidMount
    console.log("監聽的程式碼邏輯")

    // 引數一這個回撥函數的返回值: 相當於componentWillUnmount
    return () => {
      console.log("取消的監聽程式碼邏輯")
    }
  }, [])

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

export default App
登入後複製

總結: useEffect可以模擬之前的class元件的生命週期(類似而不是相等), 並且它比原來的生命週期更加強大, 青出於藍而勝於藍

更多程式設計相關知識，請存取：！！

以上就是淺析React Hook中useEffecfa函數的使用的詳細內容，更多請關注TW511.COM其它相關文章！