前言

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

一、簡(jiǎn)介

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

【資料圖】

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

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

掛載階段

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

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

具體實(shí)現(xiàn)方法取決于你所使用的訂閱方式。如果你使用的是 React Context API 或者 Redux 等狀態(tài)管理庫(kù)，則可以在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è)用于取消訂閱的函數(shù)，它在組件創(chuàng)建時(shí)通過(guò)props.subscribe方法添加訂閱，然后在組件卸載時(shí)通過(guò)componentWillUnmount方法進(jìn)行取消訂閱。

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

例如，使用addEventListener添加事件監(jiān)聽(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.
;  }}

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

更新階段

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

卸載階段

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

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

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

關(guān)鍵詞：