技術標籤：Reactreact

掛載階段：

constructor()
static getDerivedStateFromProps（）
render（）
componentDidMount（）

更新階段：

static getDerivedStateFromPropscompo（）
shouidComponentUpdate(提升react效能。減少render的渲染次數)
根 據外部傳入的屬性變化，或者根據內部狀態的變化，最終如果返回true就會執行render,否則不會執行更新
getSnapshotBeforeUpdate（）
componentDidUpdate（）

銷燬：

componentWillUnmount（）

生命週期

1 constructor(props)

做些初始化的動作
通過給 this.state 賦值物件來初始化內部 state。

  constructor(props) {
  super(props);
  this.state = {
     number:1
  };
}

為事件處理函式繫結例項

//如果不用箭頭函式
hand(){
        console.log(this)
    }   
    //需新增要在
    constructor(){
          this.hand=this.hand.bind(this
 
)
    }

constructor建構函式的做用？
  通過給 this.state 賦值物件來初始化內部 state。
  為事件處理函式繫結例項
  注意：內部不能呼叫setState方法，原因是以為真實dom結構都沒有生成好！

**

2.static getDerivedStateFromProps(nextProps, prevState)

**
代替了
**UNSAFE_componentWillReceiveProps ** 廢棄了

1.這個鉤子函式屬於類的，需要定義的話，前面加static,內部的this是undfined
2.必須要定義元件的初始化狀態
3.內部需要返回一個物件，指明要更改哪個狀態。

該函式會在呼叫 render 方法之前呼叫，在元件例項化後，和接受新的props後被呼叫，並且在初始掛載及後續更新時都會被呼叫。它應返回一個物件來更新 state，如果返回 null 則不更新任何內容。

如果你的元件內部的某個狀態想要由外部傳入的屬性進行關聯控制的話，就用到它了。

3 render（）

render是react類元件生命週期中必不可少的鉤子。
掛載階段需要執行，目的就是將jsx程式碼編譯好的虛擬dom渲染成真實dom結構

render鉤子函式執行時機？
當呼叫forceUpdate/setState()/外部傳入新的屬性的時候

4 shouldComponentUpdate(nextProps, nextState)

當 props 或 state 發生變化時，shouldComponentUpdate() 會在渲染執行之前被呼叫。返回值預設為 true。首次渲染或使用 forceUpdate() 時不會呼叫該方法。
此方法僅作為效能優化的方式而存在
特點：

這個鉤子函式內部可以根據返回true or false 。
ture 進入 render。
false 不進render。
可以過濾一些 for 迴圈 減少執行次數，提高效能。

但是如果每個元件都寫這個函式，太繁瑣，所以推出 PureComponent 純元件 ,純元件 有擁shouldComponentUpdate（）函式一樣的功能

1.在類元件中可以使用純元件來代替shouldComponentUpdate（）方法
export default class one extends PureComponent {}

2.在函式元件中使用 React.memo替代shouldComponentUpdate（）方法

export default React.memo(function(){})

5 getSnapshotBeforeUpdate（）

在react render()後的輸出被渲染到DOM之前被呼叫。它使您的元件能夠在它們被潛在更改之前捕獲當前值（如滾動位置）。這個生命週期返回的任何值都將作為引數傳遞給componentDidUpdate（）
滾動條鉤子 10滾動條鉤子.note
此用法並不常見，但它可能出現在 UI 處理中，如需要以特殊方式處理滾動位置的聊天執行緒等。

6.componentDidUpdate(prevProps, prevState, snapshot)

在更新發生後立即呼叫componentDidUpdate()。此方法不用於初始渲染。
當元件更新時，將此作為一個機會來操作DOM。只要您將當前的props與以前的props進行比較（例如，如果props沒有改變，則可能不需要網路請求），這也是做網路請求的好地方。
如果元件實現getSnapshotBeforeUpdate()生命週期，則它返回的值將作為第三個“快照”引數傳遞給componentDidUpdate()。否則，這個引數是undefined。

會在更新後會被立即呼叫。首次渲染不會執行此方法。比如用在輪播圖
當元件更新後，可以在此處對 DOM 進行操作

7 componentDidMount()

componentDidMount() 會在元件掛載後（插入 DOM 樹中）立即呼叫。依賴於 DOM 節點的初始化應該放在這裡。如需通過網路請求獲取資料，此處是例項化請求的好地方。
代表真實dom已經掛載完畢了，可以在此鉤子函式中進行一些例項化相關的操作
ajax的非同步請求獲取資料
網路請求

8 componentWillUnmount()

在元件被解除安裝並銷燬之前立即被呼叫。在此方法中執行任何必要的清理，例如使定時器無效，取消網路請求或清理在componentDidMount（）中建立的任何監聽。

已知componentWillUnmount()會在元件將被解除安裝前，被執行。
那麼如何手動解除安裝某個元件，以(觸發該方法的執行來)驗證該規則？
呼叫以下API即可：ReactDOM.unmountComponentAtNode(container)