React 中的組件有三種狀態:
- Mounted:已插入真實 DOM
- Updating:正在被重新渲染
- Unmounted:已移出真實 DOM
它為每個狀態都提供了兩種處理函數:
will:函數在進入狀態之前調用,
did: 函數在進入狀態之后調用,三種狀態共計五種處理函數。
所以,除了組件初始化時調用的getDefaultProps,getInitialState方法外,每個組件還有
componentWillMount,componentDidMount,componentWillUpdate,componentDidUpdate,componentWillUnmount五種方法;
除此之外,react還提供了兩種特殊狀態的處理函數:
- componentWillReceiveProps(object nextProps):已加載組件收到新的參數時調用
- shouldComponentUpdate(object nextProps, object nextState):組件判斷是否重新渲染時調用
當一個組件被調用的時候先執行getDefaultProps,getInitialState獲取他的默認屬性和狀態,然后執行componentWillMount(即將渲染),接下來渲染到dom樹上,渲染完成觸發componentDidMount函數;
這時候,該組件就進入了一個running狀態,並監視他的props和state以及被移除事件:
當props發生變化時執行componentWillReceiveProps然后去判斷是否需要重新渲染(shouldComponentUpdate),如果不需要則繼續保持running狀態;如果需要則如初始時一樣,執行componentWillMount(即將渲染),接下來渲染到dom樹上,渲染完成觸發componentDidMount函數,保持running狀態繼續監視;
當state發生變化時,則直接判斷是否需要重新渲染(shouldComponentUpdate),然后根據是否需要決定執行渲染過程還是繼續保持running狀態;
當該組件被移除(unmount)時,將直接執行componentWillUnmount,該組件從dom樹上消失;