小編精選 - 技術文章翻譯 · 09月15日

入門說明：React 中用 hooks 取代生命週期

react hooks

如果你曾經使用過 React，你應該對 React 生命週期的強大有一定的了解。即將推出的 React Hooks 將改變我們處理生命週期的方式。

React Hooks 是現有功能的統一，包括狀態和生命週期。在這篇文章中，我將向你展示如何將生命週期的類別方法轉換為 React Hooks，以深入了解 React Hooks。

對於三個最常見的生命週期方法 (componentDidMount、componentDidUpdate、componentWillUnmount)，我將展示一個類別樣式的實現和一個 Hooks 樣式的對應實現，然後解釋其背後的原理。

componentDidMount

class Example extends React.Component {
  componentDidMount() {
    console.log('我已經掛載！');
  }
  render() {
    return null;
  }
}

function Example() {
  useEffect(() => console.log('掛載'), []);
  return null;
}

useEffect 是一個 React hook，你可以在其中應用副作用，例如從伺服器獲取資料。

第一個參數是一個回調函數，該回調函數會在瀏覽器布局和繪製之後觸發。因此，它不會阻塞瀏覽器的繪製過程。

第二個參數是一個值的陣列（通常是 props）。

componentDidMount() {
  console.log('已掛載或更新');
}

componentDidUpdate() {
  console.log('已掛載或更新');
}

useEffect(() => console.log('已掛載或更新'));

在 Hooks 中並沒有直接取代 componentDidUpdate 的實現。useEffect 函數可用於在組件每次渲染後觸發回調，包括在組件掛載和組件更新後。

不過這並不是一個大問題，因為大多數情況下我們會將相似的函數放在 componentDidMount 和 componentDidUpdate 中。

單獨模仿 componentDidUpdate 可以成為另一篇文章的討論主題。

componentWillUnmount() {
  console.log('將卸載');
}

useEffect(() => {
  return () => {
    console.log('將卸載');
  }
}, []);

當你在傳遞給 useEffect 的回調中返回一個函數時，該返回的函數將在組件從 UI 中移除之前被調用。

如我們之前所討論的，我們需要將空列表作為 useEffect 的第二個參數傳遞，以便回調函數只會被調用一次。這同樣適用於返回的函數。

通常我們在 componentWillUnmount 中進行清理。假設你想在 componentDidMount 時創建一個事件監聽器，並在 componentWillUnmount 時進行清理。使用 Hooks 時，這段代碼將合併到一個回調函數中。

我們可以為不同的副作用創建多個 Hooks 並重複使用它們。將相關代碼分組並使狀態管理可重用是 React Hooks 的主要目的之一。

現在我們可以將 componentDidMount、componentDidUpdate 和 componentWillUnmount 轉換為 React Hooks，太好了！

但是，等等，還有一個問題：這兩種樣式的效果並不完全相同。

與 componentDidMount 和 componentDidUpdate 不同，傳遞給 useEffect 的函數在布局和繪製之後觸發，在一個延遲事件中。

通常這不是問題。但如果你想在效應中操作 DOM，並且希望在瀏覽器繪製之前確保它發生，你需要使用 useLayoutEffect。語法與 useEffect 一樣。

總結來說，我們可以使用 useEffect hook 來取代生命週期方法，但它們並不完全相同。在使用它們時，儘量用 Hooks 的思維方式！

0個讚 0留言 41瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

精選技術文章翻譯，幫助開發者持續吸收新知。