React 'useEffect' hook 替換了多少生命周期方法？

Question

React useEffect可以替代多少生命周期方法？

我發現一篇關於useEffect hook 的文章聲稱它只能替換三個，即componentDidMount 、 componentDidUpdate和componentWillUnmount 。

其他人呢？

Answer 1

這實際上就是全部。 useEffect() 在組件安裝后調用，而不是在每次狀態更新時調用。 如果你想把它用作 componentWillUnmout 你必須像這樣返回一個清理函數

useEffect(() => {
//something you want to do
return () => console.log('cleanup is running');
});

Answer 2

不，差不多就是這樣，盡管當您返回一個函數並且不傳遞依賴項時它接近componentWillUpdate （它只是在第一次渲染之前不運行）

仔細想想，這是一個非常簡單的鈎子。 規則非常簡單：

您傳遞給useEffect的函數：

• 每次渲染后運行，除非您提供依賴數組。
• 如果您在依賴項數組中提供，它會在第一次渲染時運行，然后在依賴項發生變化時運行。

您從useEffect函數返回的函數：

• 除非您提供依賴項數組，否則在每次渲染之前運行（除了第一次渲染）。
• 如果您提供依賴項數組，則它會在依賴項已更改或組件卸載的渲染之前運行。

最好不要考慮它取代的生命周期事件。 而是考慮這 4 條規則以及如何讓它們在您需要時運行您的功能。