react 生命週期變遷

wills發表於2019-09-11
React

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

相關文章