技術文章 » 10分鐘理解React生命週期

10分鐘理解React生命週期

2023-04-16 21:00:29

前言

學習React，生命週期很重要，我們瞭解完生命週期的各個元件，對寫高效能元件會有很大的幫助.

一、簡介

React /riˈækt/ 元件的生命週期指的是元件從建立到銷燬過程中所經歷的一系列方法呼叫。這些方法可以讓我們在不同的時刻執行特定的程式碼，以滿足元件的需求。

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

二、生命週期三個階段

掛載階段

  • constructor() ：/kənˈstrʌktə(r)/ 建構函式，最先被執行,我們通常在建構函式裡初始化state物件或者給自定義方法系結this
  • static getDerivedStateFromProps() ：static getDerivedStateFromProps(nextProps, prevState)，這是個靜態方法,當我們接收到新的屬性想去修改state，可以使用getDerivedStateFromProps
  • render() ： /ˈ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 (
      <div>
        <span>Current value: {this.state.value}</span>
      </div>
    );
  }
}

在上面的程式碼中，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 <div>Click anywhere to log the target element.</div>;
  }
}

在上面的程式碼中，我們在元件掛載時通過 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 樹中移除並銷燬。

每個生命週期方法都有不同的作用，可以用來實現各種需求，比如在元件掛載時進行初始化工作、在元件更新時進行資料處理或者在元件解除安裝時進行清理工作等。