本篇文章給大家介紹一下React Hook中的useEffecfa函數，聊聊useEffecfa函數的使用細節，希望對大家有所幫助！
useEffect的詳細解析
useEffecf基本使用
書接上文, 上一篇文章我們講解了State Hook, 我們已經可以通過這個hook在函數式組件中定義state。
我們知道在類組件中是可以有生命周期函數的, 那么如何在函數組件中定義類似于生命周期這些函數呢?
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 AppHook允許我們按照代碼的用途分離它們， 而不是像生命周期函數那樣, 將很多邏輯放在一起:
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組件的生命周期(類似而不是相等), 并且它比原來的生命周期更加強大, 青出于藍而勝于藍
