正確使用componentWillUnmount生命周期函數

一、什麼是componentWillUnmount生命周期函數？

componentWillUnmount生命周期函數是React中的一個生命周期函數，它在組件即將被卸載和銷毀之前被調用。在這個函數中，你可以執行一些必要的清理工作，例如取消訂閱、清除計時器等。這可以幫助你防止內存泄露和不必要的資源消耗。

二、componentWillUnmount函數的使用場景

一般來說，當你的組件創建了一些對外界的依賴，例如訂閱事件、創建計時器等，那麼就需要在組件卸載前，將這些依賴清理掉。

以計時器為例，通過使用componentDidMount創建了計時器，那麼在組件卸載前，需要使用componentWillUnmount來清除計時器。

componentDidMount(){
  this.timer = setInterval(() => {
    this.props.fetchData();
  }, 10000);
}

componentWillUnmount(){
  clearInterval(this.timer);
}

在上面的代碼中，我們在componentDidMount中創建了計時器，並且使用了this.timer來保存計時器的引用。在componentWillUnmount中，我們清除了這個計時器。這樣可以保證，在該組件被卸載銷毀後，不會再執行超時請求，保證了程序的健壯性。

三、常見錯誤

使用setState()

在componentWillUnmount中，不能使用setState()方法。這是因為，在組件被卸載之前，React已經將組件狀態設置為不可用，並且不能再調用setState()方法去更新狀態。

componentWillUnmount(){
  this.setState({ isMounted: false }); //錯誤示例
}

會影響子組件的生命周期函數

如果在父組件的componentWillUnmount函數中，調用了某個子組件的setState()方法，這將會觸發子組件的重新渲染。子組件被重新渲染後，React會重新調用子組件的生命周期函數。如果在子組件的生命周期函數中讀取了父組件的狀態值，那麼就會出現一些不可預知的錯誤。

class Parent extends React.Component {

componentWillUnmount(){

this.setState({ isMounted: false }); // 錯誤示例

this.refs.child.setState({ isMounted: false }); // 錯誤示例

}

render() {

return ();

}

}
class Child extends React.Component {
 render() {
 let isMounted = this.props.isMounted || false;
 return ({isMounted.toString()}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/239040.html