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

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

彭州網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站建設等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選成都創(chuàng)新互聯(lián)公司。

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

本教程操作環(huán)境：Windows7系統(tǒng)、react17.0.1版、Dell G3電腦。

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

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

React 17 新增生命周期

一、廢除的生命周期

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

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

componentWillMount

componentWillRecieveProps

componentWIllUpdate

二、新增的生命周期

getDerivedStateFromProps(nextProps, prevState)

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

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

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

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

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

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

getSnapshotBeforeUpdate()

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

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

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

componendDidCatch(error, info)

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

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

三、基本使用

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

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

新聞標題：react新增加的生命周期是什么
分享路徑：http://muchs.cn/article20/iehcjo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、微信公眾號、域名注冊、網(wǎng)站營銷、面包屑導航、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)