React.js 元件生命週期 - 更新階段

更新生命週期可以由兩個事件觸發：

• 父元件更新 props
• 本地狀態發生變化

父元件更新 props

• componentWillReceiveProps(nextProps) −
  • 這是在 props 發生變化時呼叫的第一個方法。它包含一個引數 nextProps，表示新更改的 props。
  • 在這裡，如果需要，我們可以將本地狀態與 props 同步。
  • 如果狀態不需要與 props 同步，則可能不需要實現此方法。
  • 應避免在此處引發副作用。因為如果在此處使用副作用，可能會導致重新渲染或效能問題。

現在，componentWillReceiveProps 已被棄用，並由靜態方法 getDerivedStateFromProps(props,state) 替換。顧名思義，該方法清楚地表明瞭其用途。

每當我們想要從新的 props 中計算或派生狀態時，都應該使用上述方法。

• shouldComponentUpdate(nextProps, nextState) −
  • 此方法返回一個布林值 true 或 false。根據返回值，React 執行 render 方法，該方法更新實際的 DOM。
  • 如果需要，我們可以在此方法中新增自定義邏輯，例如比較一些變數以決定更新過程。
  • 應避免副作用。
• ComponentWillUpdate(nextProps, nextState) −
  • 當 shouldComponentUpdate 返回 true 時，此方法執行一次。
  • 這可能是將狀態與 props 同步的更好位置，因為它肯定即將渲染。

  • 在此處也應避免副作用。

    現在，componentWillUpdate 已被棄用。最新的方法是 getSnapshotBeforeUpdate，它可以在極少數情況下使用。例如，識別元素的滾動位置。此方法在實際更新 DOM 之前執行。

• Render −
  • render 方法的執行決定了在與虛擬 DOM 比較後需要更新實際 DOM 的哪些更改。
  • 像往常一樣，它將根據更新條件準備 jsx 程式碼。
  • 它還將處理子元件的更新。
  • 我們可以從 render 方法中返回幾乎任何東西，例如布林值、null、字串、陣列、div、片段等。
• componentDidUpdate
  • 在這裡，我們可以執行副作用。
  • 但是使用 setState 更新狀態應該謹慎操作。它應該僅在有條件的情況下更新，以避免無限的 API 呼叫迴圈。
  • 因為 componentDidUpdate 在每次 render 方法呼叫後的每次更新時都會被呼叫。

由內部更改觸發的更新

• 如果使用 setState 更改了 state 物件，則會呼叫此更新週期。此週期從 shouldComponentUpdate 直接開始，因為我們在上面顯示的其他方法處理 props，而這裡我們沒有更改 props。
• shouldComponentUpdate 之後的呼叫層次結構將保持不變。

• shouldComponentUpdate=>componentWillUpdate=>render=>更新子元件=>componentDidUpdate

  可以使用瀏覽器開發者工具檢查實際 DOM 上元素的更新，以檢視影響或效能問題。

  如果我們使用 F12 或檢查元素，並點選該檢查視窗右側的三個垂直點，我們可以看到以下選項。

點選更多工具=>渲染

點選複選框“繪製閃爍”。每當頁面上的元素更新時，它都會突出顯示。

使用此工具是為了檢查哪些元素正在更新，並查詢任何效能問題。我們可以使用此工具避免不必要地更新某些元素。

Shyam Hande

更新於：2019年9月4日

287 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習