這篇文章會假設你對useEffect?API有一定程度的了解。

這篇文章真的很長。它更像一本mini書，這也是我更喜歡的形式。如果你很匆忙或者并不是太關心本文主題的話，你也可以直接看下面的摘要。

如果你對于深入研究感覺不是很適應的話，你或許可以等下面這些解釋出現(xiàn)在其他文章中再去了解也行。就像2013年React剛出世的時候，大家需要時間去理解消化一種不同的心智模型。知識也需要時間去普及。

摘要

如果你不想閱讀整篇文章，可以快速瀏覽這份摘要。要是某些部分不容易理解，你可以往下滾動尋找相關的內(nèi)容去閱讀。

如果你打算閱讀整篇文章，你完全可以跳過這部分。我會在文章末尾帶上摘要的鏈接。

?? Question: 如何用useEffect模擬componentDidMount生命周期？

雖然可以使用useEffect(fn, [])，但它們并不完全相等。和componentDidMount不一樣，useEffect會捕獲?props和state。所以即便在回調(diào)函數(shù)里，你拿到的還是初始的props和state。如果你想得到“最新”的值，你可以使用ref。不過，通常會有更簡單的實現(xiàn)方式，所以你并不一定要用ref。記住，effects的心智模型和componentDidMount以及其他生命周期是不同的，試圖找到它們之間完全一致的表達反而更容易使你混淆。想要更有效，你需要“think in effects”，它的心智模型更接近于實現(xiàn)狀態(tài)同步，而不是響應生命周期事件。

?? Question: 如何正確地在useEffect里請求數(shù)據(jù)？[]又是什么？

這篇文章?是很好的入門，介紹了如何在useEffect里做數(shù)據(jù)請求。請務必讀完它！它沒有我的這篇這么長。[]表示effect沒有使用任何React數(shù)據(jù)流里的值，因此該effect僅被調(diào)用一次是安全的。[]同樣也是一類常見問題的來源，也即你以為沒使用數(shù)據(jù)流里的值但其實使用了。你需要學習一些策略（主要是useReducer?和?useCallback）來移除這些effect依賴，而不是錯誤地忽略它們。

?? Question: 我應該把函數(shù)當做effect的依賴嗎？

一般建議把不依賴props和state的函數(shù)提到你的組件外面，并且把那些僅被effect使用的函數(shù)放到effect里面。如果這樣做了以后，你的effect還是需要用到組件內(nèi)的函數(shù)（包括通過props傳進來的函數(shù)），可以在定義它們的地方用useCallback包一層。為什么要這樣做呢？因為這些函數(shù)可以訪問到props和state，因此它們會參與到數(shù)據(jù)流中。我們官網(wǎng)的FAQ有更詳細的答案。

?? Question: 為什么有時候會出現(xiàn)無限重復請求的問題？

這個通常發(fā)生于你在effect里做數(shù)據(jù)請求并且沒有設置effect依賴參數(shù)的情況。沒有設置依賴，effect會在每次渲染后執(zhí)行一次，然后在effect中更新了狀態(tài)引起渲染并再次觸發(fā)effect。無限循環(huán)的發(fā)生也可能是因為你設置的依賴總是會改變。你可以通過一個一個移除的方式排查出哪個依賴導致了問題。但是，移除你使用的依賴（或者盲目地使用[]）通常是一種錯誤的解決方式。你應該做的是解決問題的根源。舉個例子，函數(shù)可能會導致這個問題，你可以把它們放到effect里，或者提到組件外面，或者用useCallback包一層。useMemo?可以做類似的事情以避免重復生成對象。

?? 為什么有時候在effect里拿到的是舊的state或prop呢？

Effect拿到的總是定義它的那次渲染中的props和state。這能夠避免一些bugs，但在一些場景中又會有些討人嫌。對于這些場景，你可以明確地使用可變的ref保存一些值（上面文章的末尾解釋了這一點）。如果你覺得在渲染中拿到了一些舊的props和state，且不是你想要的，你很可能遺漏了一些依賴。可以嘗試使用這個lint 規(guī)則來訓練你發(fā)現(xiàn)這些依賴?？赡軟]過幾天，這種能力會變得像是你的第二天性。同樣可以看我們官網(wǎng)FAQ中的這個回答。

由于此編輯器無法表現(xiàn)文檔內(nèi)容，詳情原文內(nèi)容請訪問：https://overreacted.io/a-complete-guide-to-useeffect/ 。

此內(nèi)容由 React 作者 Dan 編寫，建議 React 使用者仔細閱讀，會對你有很大的幫助。