前言

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

一、簡介

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

【資料圖】

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

二、生命周期三個階段

掛載階段

constructor()：/k?n?str?kt?(r)/構(gòu)造函數(shù)，最先被執(zhí)行,我們通常在構(gòu)造函數(shù)里初始化state對象或者給自定義方法綁定thisstatic getDerivedStateFromProps()：static getDerivedStateFromProps(nextProps, prevState)，這是個靜態(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)用，此時可以獲取到DOM節(jié)點并操作，比如對canvas，svg的操作，服務(wù)器請求，訂閱都可以寫在這個里面，但是記得在componentWillUnmount中取消訂閱。componentWillUnmount中取消訂閱。1、在componentWillUnmount生命周期方法中，我們可以執(zhí)行一些清理工作，比如取消訂閱或者清除定時器等。

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

具體實現(xiàn)方法取決于你所使用的訂閱方式。如果你使用的是 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方法是一個用于取消訂閱的函數(shù)，它在組件創(chuàng)建時通過props.subscribe方法添加訂閱，然后在組件卸載時通過componentWillUnmount方法進(jìn)行取消訂閱。

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

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

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事件監(jiān)聽器，然后在組件卸載時通過removeEventListener方法移除該監(jiān)聽器。這樣可以確保在組件卸載時不會再接收到無效的事件通知。

更新階段

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

卸載階段

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

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

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

關(guān)鍵詞：