react新增加的生命周期是什么

這篇文章將為大家詳細講解有關react新增加的生命周期是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

新增加的生命周期有：1、getDerivedStateFromProps，用來控制props更新state的過程；2、getSnapshotBeforeUpdate，用于讀取最新的DOM數據；3、componendDidCatch。

本教程操作環境：Windows7系統、react17.0.1版、Dell G3電腦。

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

React 生命周期分為三種狀態 1. 初始化 2.更新 3.銷毀

React 17 新增生命周期

一、廢除的生命周期

　　官網文檔指出使用這些生命周期的代碼會在未來版本的react中更容易產生bug，尤其是對于異步渲染的版本

　　由于未來采用異步渲染機制，所以即將在17版本中去掉的生命周期鉤子函數

　　componentWillMount

　　componentWillRecieveProps

　　componentWIllUpdate

二、新增的生命周期

getDerivedStateFromProps(nextProps, prevState)

用于替換componentWillReceiveProps，可以用來控制 props 更新 state 的過程；它返回一個對象表示新的 state；如果不需要更新，返回 null 即可

在每次渲染之前都會調用，不管初始掛載還是后面的更新都會調用，這一點和componentWillReceiveProps不同（只有當父組件造成重新渲染時才調用

簡單的理解就說從props中獲取state，這個生命周期的功能實際上就是將傳入的props映射到state上面

getDerivedStateFromProps是一個靜態函數，也就是這個函數不能通過this訪問到class的屬性，也并不推薦直接訪問屬性。而是應該通過參數提供的nextProps以及prevState來進行判斷，根據新傳入的props來映射到state

如果props傳入的內容不需要影響到你的state，那么就需要返回一個null，這個返回值是必須的，所以盡量將其寫到函數的末尾

static getDerivedStateFromProps(nextProps, prevState) {
    const {type} = nextProps;
    // 當傳入的type發生變化的時候，更新state
    if (type !== prevState.type) {
        return {
            type,
        };
    }
    // 否則，對于state不進行任何操作
    return null;
}

getSnapshotBeforeUpdate()

在最近的更改被提交到DOM元素前，使得組件可以在更改之前獲得當前值，此生命周期返回的任意值都會傳給componentDidUpdate()。

用于替換 componentWillUpdate，該函數會在update后 DOM 更新前被調用，用于讀取最新的 DOM 數據，返回值將作為 componentDidUpdate 的第三個參數

在最新的渲染數據提交給DOM前會立即調用，它讓你在組件的數據可能要改變之前獲取他們

componendDidCatch(error, info)

如果一個組件定義了componentDidCatch生命周期，則他將成為一個錯誤邊界(錯誤邊界會捕捉渲染期間、在生命周期方法中和在它們之下整棵樹的構造函數中的錯誤，

就像使用了try catch，不會將錯誤直接拋出了，保證應用的可用性)

三、基本使用

class A extends React.Component {
  // 用于初始化 state
  constructor() {}
  // 用于替換 `componentWillReceiveProps` ，該函數會在初始化和 `update` 時被調用
  // 因為該函數是靜態函數，所以取不到 `this`
  // 如果需要對比 `prevProps` 需要單獨在 `state` 中維護
  static getDerivedStateFromProps(nextProps, prevState) {}
  // 判斷是否需要更新組件，多用于組件性能優化
  shouldComponentUpdate(nextProps, nextState) {}
  // 組件掛載后調用
  // 可以在該函數中進行請求或者訂閱
  componentDidMount() {}
  // 用于獲得最新的 DOM 數據
  getSnapshotBeforeUpdate() {}
  // 組件即將銷毀
  // 可以在此處移除訂閱，定時器等等
  componentWillUnmount() {}
  // 組件銷毀后調用
  componentDidUnMount() {}
  // 組件更新后調用
  componentDidUpdate() {}
  // 渲染組件函數
  render() {}
}

關于“react新增加的生命周期是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。