[官方文件 戳這裡][reactjs.org/docs/react-…]
react中的每個元件都有幾個“生命週期函式”, 他們會在元件的執行過程中的特定時機觸發。
react的生命週期函式主要包括三種: 掛載、更新和 解除安裝。
掛載
這些方法在 建立元件示例並將其插入到DOM中呼叫。
更新
這些方法在 元件的state或者props發生改變,元件重新渲染時 呼叫。
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
解除安裝
這些方法在 元件解除安裝的時候呼叫。
render()
返回型別包括以下幾種型別:
- react節點
- num或者 string, 將會被渲染成文字節點
- null, 不做渲染
- 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()
在元件被解除安裝之前呼叫。可做一些清除操作。