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

#　　componentWIll上

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() {}
}

【相關推薦：Redis影片教學】

以上是react新增加的生命週期有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！