前言

學習React，生命周期很重要，我們了解完生命周期的各個組件，對寫高性能組件會有很大的幫助.

一、簡介

React/ri??kt/組件的生命周期指的是組件從創建到銷毀過程中所經歷的一系列方法調用。這些方法可以讓我們在不同的時刻執行特定的代碼，以滿足組件的需求。

【資料圖】

React 的生命周期可以分為三個階段：掛載階段、更新階段和卸載階段。每個階段都有對應的生命周期方法，如下所示：

二、生命周期三個階段

掛載階段

constructor()：/k?n?str?kt?(r)/構造函數，最先被執行,我們通常在構造函數里初始化state對象或者給自定義方法綁定thisstatic getDerivedStateFromProps()：static getDerivedStateFromProps(nextProps, prevState)，這是個靜態方法,當我們接收到新的屬性想去修改state，可以使用getDerivedStateFromPropsrender()：/?rend?(r)/render函數是純函數，只返回需要渲染的東西，不應該包含其它的業務邏輯,可以返回原生的DOM、React組件、Fragment、Portals、字符串和數字、Boolean和null等內容componentDidMount()：組件裝載之后調用，此時可以獲取到DOM節點并操作，比如對canvas，svg的操作，服務器請求，訂閱都可以寫在這個里面，但是記得在componentWillUnmount中取消訂閱。componentWillUnmount中取消訂閱。1、在componentWillUnmount生命周期方法中，我們可以執行一些清理工作，比如取消訂閱或者清除定時器等。

取消訂閱是指在組件卸載之前，將之前添加的事件監聽或者數據訂閱取消掉，以避免內存泄漏和無效的數據處理。

具體實現方法取決于你所使用的訂閱方式。如果你使用的是 React Context API 或者 Redux 等狀態管理庫，則可以在componentWillUnmount方法中取消訂閱。例如，使用 React Context API 訂閱狀態更新的代碼可能如下所示：

class MyComponent extends React.Component {  constructor(props) {    super(props);    this.state = {      value: props.initialValue,    };    this.unsubscribe = props.subscribe(this.handleValueChange);  }  componentWillUnmount() {    this.unsubscribe();  }  handleValueChange = (newValue) => {    this.setState({ value: newValue });  };  render() {    return (      
        Current value: {this.state.value}      
    );  }}

在上面的代碼中，unsubscribe方法是一個用于取消訂閱的函數，它在組件創建時通過props.subscribe方法添加訂閱，然后在組件卸載時通過componentWillUnmount方法進行取消訂閱。

2、如果你使用的是普通的 DOM 事件監聽器或者 WebSocket 等瀏覽器原生 API，那么你需要在組件卸載時手動移除事件監聽或者關閉 WebSocket 連接等。

例如，使用addEventListener添加事件監聽器的代碼可能如下所示：

class MyComponent extends React.Component {  constructor(props) {    super(props);    this.handleClick = this.handleClick.bind(this);  }  componentDidMount() {    document.addEventListener("click", this.handleClick);  }  componentWillUnmount() {    document.removeEventListener("click", this.handleClick);  }  handleClick(event) {    console.log("Clicked!", event.target);  }  render() {    return 
Click anywhere to log the target element.
;  }}

在上面的代碼中，我們在組件掛載時通過addEventListener方法添加了一個click事件監聽器，然后在組件卸載時通過removeEventListener方法移除該監聽器。這樣可以確保在組件卸載時不會再接收到無效的事件通知。

更新階段

static getDerivedStateFromProps()　/?st?t?k//d??ra?vd//ste?t//pr?ps/　此方法在更新個掛載階段都可能會調用shouldComponentUpdate()shouldComponentUpdate(nextProps, nextState)，有兩個參數nextProps和nextState，表示新的屬性和變化之后的state，返回一個布爾值，true表示會觸發重新渲染，false表示不會觸發重新渲染，默認返回true,我們通常利用此生命周期來優化React程序性能render()更新階段也會觸發此生命周期getSnapshotBeforeUpdate()getSnapshotBeforeUpdate(prevProps, prevState)，這個方法在render之后，componentDidUpdate之前調用，有兩個參數prevProps和prevState，表示之前的屬性和之前的state，這個函數有一個返回值，會作為第三個參數傳給componentDidUpdate，如果你不想要返回值，可以返回null，此生命周期必須與componentDidUpdate搭配使用componentDidUpdate()componentDidUpdate(prevProps, prevState, snapshot)，該方法在getSnapshotBeforeUpdate方法之后被調用，有三個參數prevProps，prevState，snapshot，表示之前的props，之前的state，和snapshot。第三個參數是getSnapshotBeforeUpdate返回的,如果觸發某些回調函數時需要用到 DOM 元素的狀態，則將對比或計算的過程遷移至getSnapshotBeforeUpdate，然后在componentDidUpdate中統一觸發回調或更新狀態。

卸載階段

componentWillUnmount()當組件被卸載或者銷毀了就會調用，我們可以在這個函數里去清除一些定時器，取消網絡請求，清理無效的DOM元素等垃圾清理工作

這些生命周期方法按照順序依次被調用。在掛載階段，組件被創建并插入到 DOM 樹中。在更新階段，組件的 props 或者 state 發生改變時會觸發更新，從而重新渲染組件。最后，在卸載階段，組件被從 DOM 樹中移除并銷毀。

每個生命周期方法都有不同的作用，可以用來實現各種需求，比如在組件掛載時進行初始化工作、在組件更新時進行數據處理或者在組件卸載時進行清理工作等。

關鍵詞：