React.js 元件生命週期 - 解除安裝

• ComponentWillUnmount 是解除安裝階段中唯一執行的方法。
• 當元素樹中沒有與該元件匹配的元素時，元件進入此階段。
• 在元件從實際 DOM 中移除之前，會呼叫此方法。
• 除了從 DOM 樹中移除此元件之外，該元件的所有子元件也會自動移除。
• 元件從 DOM 中移除後，它將在 React 中可供垃圾回收。
• 可以在此方法中執行清理活動。例如，清除應用程式中使用的本地儲存變數、清除會話、清理圖表、清理計時器、取消掛起的 API 請求等。

componentWillUnmount(){
   this.resetSession(); //example method to clean data
}

• 清理活動有助於提高效能、避免記憶體洩漏和維護安全性。
• 在最新的 16.4+ 版本中，三個方法被標記為已棄用並已重新命名。這些方法將在 React.js 的下一個主要版本中移除。
  • componentWillReceiveProps 更改為 UNSAFE_componentWillReceiveProps。此方法使用 getDerivedStateFromProps 方法以安全且靜態的方式實現。
  • componentWillMount 更改為 UNSAFE_componentWillMount。此方法中的程式碼應根據邏輯移動到 componentDidMount 或建構函式中。
  • componentWillUpdate 更改為 UNSAFE_componentWillUpdate。安全實現為 getSnapshotBeforeUpdate。如果此方法返回任何值，則該值將用作下一個方法（即 componentDidUpdate）的引數。
  • 如果使用者關閉瀏覽器，則 componentWiIlUnmount 將不會完成。
  • componentWillUnmount 沒有引數。不應從此方法呼叫 setState。這是對元件的一次性呼叫。此方法的目的是銷燬元件建立的副作用。
  • 元件解除安裝後，我們無法再次使用它。每次都會建立一個新的元件。
  • 此外，如果虛擬 DOM 和實際 DOM 沒有差異，React 也可以停止更新階段。

Shyam Hande

更新於： 2019年9月4日

317 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習