描述

????React 官網(wǎng)對 useEffect 的描述原文

useEffect is a React Hook that lets you synchronize a component with an external system.

useEffect 是一個 React Hook, 可以讓你與一個外部系統(tǒng)保持同步.

????首先需要知道, 這句話中的外部系統(tǒng)是指什么,?比如網(wǎng)絡, 瀏覽器API, 第三方庫等不受 React 控制的模塊, 被稱為外部系統(tǒng)(external).

????useEffect 是一個相對比較復雜的 Hook, 其中包含兩個概念: 設置代碼(setup code) 和清理代碼(cleanup code), 控制好這兩部分代碼的運行, 是使用好 useEffect 的關鍵.

場景

????與 uesRef 類似 useEffect 也同樣被 React 定義為一個應急方案(escape hatch), useEffect 的主要用途是面對 React 之外的系統(tǒng)時解決鏈接問題的一個方案, 如果不涉及外部系統(tǒng), React 并不推薦使用 useEffect, 減少不必要的 useEffect 可以讓你的代碼更容易被理解, 運行的速度更快.

????接口定義:?

參數(shù)

• setup: Function

  一個定義了功能的函數(shù), 當組件首次渲染的時候會執(zhí)行, 后續(xù)每次依賴發(fā)生變化的時候也會被調用, 可選的返回一個清理函數(shù)?cleanup?(如果?return?非函數(shù)會警告),?在每次依賴發(fā)生修改, 調用 setup 之前會先使用舊的 state?和 props 調用 cleanup,?然后使用新的 state?和 props 調用 setup 函數(shù), 最后, 當組件從?DOM?中移除的時候, React 會調用 cleanup 函數(shù).

• dependencies: Array

  setup 中使用的所有響應式的變量數(shù)組, React 使用 Object.is 對依賴項進行對比, 如果發(fā)生變化, 就先調用 cleanup (如果返回了話), 然后調用 setup, 如果沒有傳 dependencies, 那么組件每次重新渲染, useEffect 都會重新執(zhí)行. 如果傳遞空數(shù)組, 那么只會在首次渲染執(zhí)行

  
  

返回

????useEffect 返回 undefined;

用法1

? ? 鏈接到外部系統(tǒng), 有些組件在頁面上顯示時, 需要通過網(wǎng)絡, 某些瀏覽器的API, 或第三方庫, 這些不受 React 控制的系統(tǒng), 想要和 React 鏈接在一起就需要使用 useEffect.

????當組件加載完畢之后, 會先執(zhí)行設置代碼, 之后每次依賴變更之后, 會先執(zhí)行清理代碼, 緊接著執(zhí)行設置代碼, 當組件被銷毀后, 還會再執(zhí)行一次清理函數(shù).

????推薦將每個 useEffect 都編寫成一個獨立的過程, 每次只執(zhí)行一個設置代碼或清理代碼.?

用法2

? ? 自定義 Hooks 中使用, useEffect 是一個緊急方案, 對于真實的業(yè)務開發(fā)場景來說, 他有點偏抽象, 應該只作為某個功能的一部分實現(xiàn), 所以如果你經(jīng)常手動編寫 useEffect, 那你應該考慮封裝成自定義Hooks, 將 useEffect 作為獨立功能的部分實現(xiàn), 隱藏在其中.

????比如上面的例子:? ?

這樣在使用時, 可以直接通過 useCustomHookRoom 這個自定義 Hook 直接使用,?

用法3

????控制非 React 的組件, 當 state 和 props 變化的時候, React 不能感知到, 并通知組件重新渲染, 但是如果要控制的組件并不是 React 系統(tǒng)中的部分, 對 state 和 props 不起任何反應, 這個時候也可以使用 useEffect 來鏈接, 這樣的用法有點類似 Vue 中的 watch 方法的用法.

????首先需要使用 useRef 保存一個被操作對象的句柄, 然后使用一個 state 作為控制變量作為 useEffect?的依賴, 當 React 操作 state 時, 依賴變更會觸發(fā) useEffect 的設置方法, 在設置方法中, 可以通過句柄操作被控制對象, 實現(xiàn)起來像這樣:

? ? 在這個例子中, 并不需要清理函數(shù), 因為組件銷毀時,?MapWidget 會自動被瀏覽器垃圾回收, 所以 useEffect 方法中并沒有返回清理函數(shù).

用法4

? ? 控制請求響應處理, 這個場景主要是你出發(fā)請求的速度要大于情求響應的速度, 此時上一次請求還沒返回,但是后一次請求已經(jīng)發(fā)出或已經(jīng)響應, 那么上一次請求的結果就應該拋棄, 避免多次請求結果一起競爭渲染, 導致顯示結果不準確.

????fetchBio 作為一個響應時間不確定的請求方法, ignore 是一個閉包變量, 當下一次 useEffect 觸發(fā)之前, 會先使用老的依賴, 執(zhí)行清理函數(shù), 將老的 effect 中的 ignore 閉包變量設置為?true, 讓老的請求返回值不被設置, 作廢之后, 等待新的請求返回值回來, 并設置上.

????像這樣直接在 useEffect 中發(fā)出請求的代碼是有效的, 但是看起來會又些重復, 所以最好還是放在自定義 Hooks 中去封裝成貼近業(yè)務的操作, 這樣更方便服用和維護.

用法5

????useEffect 使用的一些規(guī)范, 在 useEffect 的設置方法中使用的所有響應式值(state, props)都必須收集在 useEffect 的依賴數(shù)組中, 這并不是可選的, 而是必須的, 如果你要移除一個依賴想, 就必須讓它變成一個非響應式的變量.

????獲取你還見到過類似這樣的代碼

????在開發(fā) React 的時候, React 會對你的代碼進行代碼檢查, 使用這個?eslint-ignore-next-line react-hooks/exhaustive-deps 會讓 React 代碼檢查失效, 應該避免使用這樣能夠抑制代碼檢查的工具, 因為當你的依賴項和設置方法不匹配時, 引入 BUG 的風險會很高.

????此外, 還有在 useEffec 中更新 state, 那么 state 又是 useEffect 的依賴, 可能會導致 useEffect 的設置函數(shù)產生循環(huán)調用, 避免這樣的風險, 可以使用下面這種寫法來處理

????

總結

• useEffect?包含兩個概念: 設置代碼(setup code) 和清理代碼(cleanup code)

• useEffect 是一個應急方案(escape hatch), 主要用途是面對 React 之外的系統(tǒng)時解決鏈接問題的一個方案

• useEffect 應該盡量封裝在自定義 Hooks 中

• useEffect 的設置法中使用的所有響應式值(state, props)都必須收集在依賴數(shù)組中

• 在useEffect 的設置方法中修改 state, 要使用 setCount(c => c + 1) 的方式

• 不要使用抑制代碼檢查的工具

• 如果沒有傳遞依賴項, 那么 useEffect 在每次組件渲染時執(zhí)行設置方法, 如果傳遞空數(shù)組作為依賴項, 那么 useEffect 的設置方法只在組件第一次渲染時運行.