React 生命週期

LucineXL發表於2017-11-06

[官方文件 戳這裡][reactjs.org/docs/react-…]

react中的每個元件都有幾個“生命週期函式”, 他們會在元件的執行過程中的特定時機觸發。

react的生命週期函式主要包括三種: 掛載、更新和 解除安裝。

掛載

這些方法在 建立元件示例並將其插入到DOM中呼叫。

更新

這些方法在 元件的state或者props發生改變,元件重新渲染時 呼叫。

解除安裝

這些方法在 元件解除安裝的時候呼叫。


render()

返回型別包括以下幾種型別:

  1. react節點
  2. num或者 string, 將會被渲染成文字節點
  3. null, 不做渲染
  4. boolean, 不做渲染

注: shouldComponentUpdate() 返回 false時 不會呼叫 render()

constructor()

React 的建構函式在掛載之前被呼叫。
建構函式常被用來進行資料的初始化操作,資料存放在物件 this.state 中。建構函式也經常用於將事件處理程式繫結到類例項。

如果不需要進行初始化狀態,也不需要繫結方法,則 建構函式可省略,但是需要注意的是,若在元件中新增了constructor() 方法,則需新增super(props), 否則 this.props會在建構函式中被定義,導致錯誤。

componentWillMount()

componentWillMount() 在元件被掛載之前被呼叫。會在render() 方法之前呼叫。

componentDidMount()

componentWillMount() 在元件被掛載之後立即被呼叫。

componentWillReceiveProps()

componentWillReceiveProps()在元件接收新的props之前被呼叫。
如果需要根據props的變化更新state的值,可以通過比較this.props和nextProps和state並通過 this.setState()更新state的值。

本方法會在React元件接受到新的props時才會呼叫。但是需要注意的是,即使props沒有發生變化,React也有可能會觸發本函式。比如在父元件導致子元件重新渲染的時候。如果需要真正的處理props的變化,可以通過對this.props 和 nextProps 進行比較來實現。

shouldComponentUpdate()

當元件接收到新的props或state時,在元件渲染之前會先呼叫shouldComponentUpdate()。

本方法用於告訴 React 元件是否需要重新渲染。

在shouldComponentUpdate() 返回true,則元件會重新渲染(初始化渲染時除外),反之,元件將不會重新渲染。

componentWillUpdate()

componentWillUpdate()會在元件將要更新之前呼叫。

需要注意的是,不可在本方法中進行 setState操作。 更新state後,元件在重新渲染之前,會再次呼叫本方法,會造成程式崩潰。

componentDidUpdate()

在元件更新之後馬上呼叫。

在本方法中也不可進行 setState操作。

componentWillUnmount()

在元件被解除安裝之前呼叫。可做一些清除操作。

相關文章