前言

學(xué)習React，生命周期很重要，我們了解完生命周期的各個(gè)組件，對寫(xiě)高性能組件會(huì )有很大的幫助.

一、簡(jiǎn)介

React/ri??kt/組件的生命周期指的是組件從創(chuàng )建到銷(xiāo)毀過(guò)程中所經(jīng)歷的一系列方法調用。這些方法可以讓我們在不同的時(shí)刻執行特定的代碼，以滿(mǎn)足組件的需求。

【資料圖】

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

二、生命周期三個(gè)階段

掛載階段

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

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

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

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方法是一個(gè)用于取消訂閱的函數，它在組件創(chuàng )建時(shí)通過(guò)props.subscribe方法添加訂閱，然后在組件卸載時(shí)通過(guò)componentWillUnmount方法進(jìn)行取消訂閱。

2、如果你使用的是普通的 DOM 事件監聽(tīng)器或者 WebSocket 等瀏覽器原生 API，那么你需要在組件卸載時(shí)手動(dòng)移除事件監聽(tīng)或者關(guān)閉 WebSocket 連接等。

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

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.
;  }}

在上面的代碼中，我們在組件掛載時(shí)通過(guò)addEventListener方法添加了一個(gè)click事件監聽(tīng)器，然后在組件卸載時(shí)通過(guò)removeEventListener方法移除該監聽(tīng)器。這樣可以確保在組件卸載時(shí)不會(huì )再接收到無(wú)效的事件通知。

更新階段

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

卸載階段

componentWillUnmount()當組件被卸載或者銷(xiāo)毀了就會(huì )調用，我們可以在這個(gè)函數里去清除一些定時(shí)器，取消網(wǎng)絡(luò )請求，清理無(wú)效的DOM元素等垃圾清理工作

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

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

關(guān)鍵詞：