react 生命週期變遷

wills 發表於2019-09-11

React中元件提供了對應的生命週期支援,

定義元件的的方法:

  1. create-react-class模組
  2. class 類

它們之間的的區別這裡就不展開了,具體可檢視官方文件 區別,我們繼續說生命週期

初次渲染

當元件初次渲染到DOM元素上時會呼叫以下方法:

constructor(props)

建構函式

static getDerivedStateFromProps

static getDerivedStateFromProps(props, state)
這是一個靜態方法,它是訪問不到元件的例項的,注意它是在state和props更新時都會觸發的,不同於已被廢棄的componentWillReceiveProps

render

渲染呈現,它是類元件內必須定義的方法

componentDidMount

虛擬DOM渲染到頁面節點成功後呼叫

元件更新

當元件內state 或 傳入的props 更改時會呼叫下面的方法:

static getDerivedStateFormProps(props, state)

同上

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState)

這個方法我們比較常用,我們可以在通過this.props this.state取到 舊的props、state,可以與形參內的新的Props和state進行比較 返回true與false決定元件是否重新render

render

渲染裝載節點

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps,prevProps)

Snapsshot 快照,在render 方法呼叫後應用到節點前呼叫此方法,我們可以在此方法內訪問節點在更新前的一些資料,return 出去,我們可以在componentDidUpdate的第三個形參接收到我們return 出去的資料做進一步處理應用

componentDidUpdate

componentDidUpdate(prevProps, propsState, snapshot)

更新完成後呼叫,這裡跟componentDidMount類似,可以做一些請求等操作

componentWillUnmount

元件解除安裝前呼叫,列如在元件內 setInterval 時 可以

錯誤捕捉

static getDerivedStateFromState

componentDidCatch

即將取消的生命週期

componentWillMount componentWillUpdate componentWillReceviedProps

will