React 基礎(chǔ)鞏固(四十三)——Effect Hook

一、Effect Hook的基本使用

Effect Hook 用來完成一些類似class中生命周期的功能。

在使用類組件時，不管是渲染、網(wǎng)路請求還是操作DOM，其邏輯和代碼是雜糅在一起的。例如我們希望把計數(shù)器結(jié)果顯示在標(biāo)簽上，在類組件中，我們通過生命周期進行實現(xiàn)，如下所示：

import React, { PureComponent } from "react";export class App extends PureComponent {constructor() {super();this.state = {counter: 100,};}componentDidMount() {document.title = this.state.counter;}componentDidUpdate() {document.title = this.state.counter;}render() {const { counter } = this.state;return (<div><h2>計數(shù)：{counter}</h2><button onClick={(e) => this.setState({ counter: counter + 1 })}>+1</button></div>);}
}export default App;

在函數(shù)組件中，我們可以利用useEffect來完成除渲染界面以外的事情，即完成副作用的事情。這樣能讓代碼和邏輯看起來更清晰、簡潔：

import React, { memo, useEffect, useState } from "react";export default memo(function App() {const [count, setCount] = useState(200);// 完成一些除渲染外，副作用的事情useEffect(() => {// 當(dāng)前傳入的回調(diào)函數(shù)會在組件被渲染完成后，自動執(zhí)行// 網(wǎng)絡(luò)請求/DOM操作/事件監(jiān)聽document.title = count;});return (<div><h2>計數(shù)：{count}</h2><button onClick={(e) => setCount(count + 1)}>+1</button></div>);
});

可以看到，通過useEffect的Hook，能夠告知react在渲染后需要執(zhí)行哪些操作。在react執(zhí)行完更新DOM操作后，會回調(diào)我們在useEffect中傳入的回調(diào)函數(shù)。在默認情況下，這個函數(shù)無論是第一次渲染還是每次更新后，均會被調(diào)用。

二、需要清除的Effect

在class組件中，我們通常會在componentDidMount中設(shè)置監(jiān)聽事件，componentWillUnmount中清除監(jiān)聽事件；而利用useEffect的函數(shù)組件中，我們可以通過useEffect的返回值（回調(diào)函數(shù)）來實現(xiàn)事件監(jiān)聽的清除操作：

import React, { memo, useEffect, useState } from "react";export default memo(function App_clear() {const [count, setCount] = useState(0);// 在執(zhí)行完渲染后，執(zhí)行副作用事件useEffect(() => {// 監(jiān)聽事件// const unsubscribe = store.subscribe(() => {});// function foo() {}// eventBus.on("test", foo);// 監(jiān)聽和取消放在一個地方，內(nèi)聚性高console.log("假設(shè)監(jiān)聽unsubscribe、eventBus等事件");// // 返回值：回調(diào)函數(shù) => 組件重新渲染或組件卸載時執(zhí)行return () => {console.log("取消監(jiān)聽unsubscribe、eventBus等事件");};});return (<div><button onClick={(e) => setCount(count + 1)}>+1({count})</button></div>);
});

useEffect中返回的函數(shù)，是effect的可選的清除機制，能夠?qū)崿F(xiàn)將設(shè)置監(jiān)聽和取消監(jiān)聽的邏輯放在一起，提高內(nèi)聚性。

三、多個Effect的使用

假設(shè)我們在useEffect執(zhí)行如下三個操作：

  // 在執(zhí)行完渲染后，執(zhí)行副作用事件useEffect(() => {// 1.修改document的title// 2.對redux中數(shù)據(jù)變量的監(jiān)聽// 3.監(jiān)聽eventBus中的事件});

我們會發(fā)現(xiàn)，隨著事件的增多，useEffect中的邏輯會逐漸復(fù)雜，這時我們可以將其拆分為多個effect，依次執(zhí)行，即react支持多個useEffect：

  // 在執(zhí)行完渲染后，執(zhí)行副作用事件useEffect(() => {// 1.修改document的titleconsole.log('1.修改document的title');});useEffect(() => {// 2.對redux中數(shù)據(jù)變量的監(jiān)聽console.log('2.對redux中數(shù)據(jù)變量的監(jiān)聽');});useEffect(() => {// 3.監(jiān)聽eventBus中的事件console.log('3.監(jiān)聽eventBus中的事件');});

當(dāng)我們每次觸發(fā)頁面渲染后，可以看到，三個事件被依次執(zhí)行：

四、Effect的執(zhí)行機制

我們發(fā)現(xiàn)，每次點擊按鈕都會執(zhí)行監(jiān)聽操作，假設(shè)effect中是一個網(wǎng)絡(luò)請求事件，則會在每次更新后發(fā)起請求，這樣頻繁的監(jiān)聽、請求絕對不是我們想要的。我們可以用useEffect的第二個參數(shù)來控制其執(zhí)行機制：

  // 在執(zhí)行完渲染后，執(zhí)行副作用事件useEffect(() => {// 1.修改document的titleconsole.log("1.修改document的title");}, [count]);useEffect(() => {// 2.對redux中數(shù)據(jù)變量的監(jiān)聽console.log("2.對redux中數(shù)據(jù)變量的監(jiān)聽");}, []);useEffect(() => {// 3.監(jiān)聽eventBus中的事件console.log("3.監(jiān)聽eventBus中的事件");}, []);

當(dāng)我們傳入一個空數(shù)組時，意味著該副作用事件不依賴任何內(nèi)容，此時與componentDidMount的效果一致，只有在第一次加載時，才會執(zhí)行useEffect：

當(dāng)我們對于事件1傳入[count]時，則意味著事件1所在的useEffect依賴count變量，當(dāng)count變量發(fā)生變化時，則會執(zhí)行。于是，當(dāng)我們點擊按鈕修改count值時，只有事件1會被一次次的觸發(fā)：