淺析React Hook中useEffecfa函數的使用

這篇文章跟大家介紹React Hook中的useEffecfa函數，聊聊useEffecfa函數的使用細節，希望對大家有幫助！

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 id="counter">{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 id="counter">{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 id="App">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 id="nbsp-setCounter-counter-counter"> 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 id="nbsp-setCounter-counter-counter"> setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

总结: useEffect可以模拟之前的class组件的生命周期(类似而不是相等), 并且它比原来的生命周期更加强大, 青出于蓝而胜于蓝

更多编程相关知识，请访问：编程教学！！

以上是淺析React Hook中useEffecfa函數的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！