react-native 生命週期

標籤：number   strong   super   更新   步驟   瞭解   事件   tin   const   

一、前言

問：

　　什麼是組件的生命週期？

　　組件的生命週期中都包含哪些方法，各有什麼作用？

　　生命週期的方法都在什麼時候調用？

 

生命週期： 顧名思義，一個主體從出生到死亡的整個過程

學習組件（React的基石、核心），必須先去瞭解他整個生命的流程，才能掌握組件的使用方法，否則盲目的使用，只是在一次次的碰運氣而已。

 

二、本文（一）、先分拆周期（分成3個模組）

組件裝載（Mounting）、組件更新（Updating）、組件卸載（UnMounting）

 

（二）、再盜圖

 （三）、再詳解生命週期的方法

1. 組件裝載前：

方法： getDefaultProps()

作用： 為組件設定預設屬性（props），es6使用defaultProps來設定預設屬性

static defaultProps = {    name: ‘小明‘ ,    age: 22,    sex: ‘男‘      }//import PropTypes from ‘prop-types‘  規定屬性類型static propTypes = {    name: PropTypes.string.isRequired,    //isRequired表示該屬性必須傳入    age: PropTypes.number,    sex: PropTypes.string}

2. 組件裝載階段：

方法： getInitialState() 組件的構造方法

作用： 為組件初始化狀態（state），es6使用constructor()來初始化，此時可擷取this.props...

constructor(props){    super(props);    //只要組件存在constructor,就必要要寫super,否則this指向會錯誤    this.state = {        visible: false,    }}

 

方法：componentWillMount()

作用： 組件裝載前調用，以後組件更新不調用，整個生命週期只調用一次，此時可以修改state。

 

方法：render()

作用： react最重要的步驟，建立虛擬dom，進行diff演算法，更新dom樹都在此進行。此時就不能更改state了。

概念：

　　虛擬DOM（Virtual Dom）：組件並不是真正的DOM節點，而是存在於記憶體中的資料結構（此時即可叫虛擬節點），只有當它插入真正的文檔之後，才變成真正的DOM

　　diff演算法： React的設計就是，所有DOM的變動都會先發生在虛擬DOM上，然後再將實際的DOM變動反映到真實的DOM的節點上。（實際的DOM變動就是通過diff演算法來完成）

 

方法：componentDidMount()

作用： 組件裝載之後調用，只調用一次。

 

3. 組件的更新階段（此階段會根據props和state的改變不斷迴圈）

方法：componentWillReceiveProps(nextProps)

作用： 組件初始化時不調用，組件接受新的props時調用。

　　　即監聽組件屬性的變化，可以通過此方法來解決props改變組件卻不重新渲染的問題

componentWillReceiveProps(nextProps){    this.setState({visible: nextProps.visible})}

 

方法：shouldComponentUpdate(nextProps, nextState)

作用： react效能最佳化非常重要的一環。

組件接受新的state或者props時調用，我們可以設定在此對比前後兩個props和state是否相同，

如果相同則返回false阻止更新，因為相同的屬性狀態一定會產生相同的dom樹，這樣就不需要創造新的dom樹和舊的dom樹進行diff演算法對比，節省大量效能，尤其是在dom結構複雜的時候

 

方法：componentWillUpdate(nextProps, nextState)

作用： 組件初始化時不調用，只有在組件將要更新時才調用，此時可以修改state

 

方法：render()

作用： 組件props或state更新，重新渲染

 

方法：componentDidUpdate()

作用： 組件初始化時不調用，組件更新完成後調用，此時可以擷取dom節點。

 

4. 組件的卸載階段

方法：componentWillUnmount()

作用： 組件將要卸載時調用，一些事件監聽和定時器需要在此時清除。

 

 

三、結語

加油！

 

 

react-native 生命週期