1. 程式人生 > >React生命周期

React生命周期

sta 釋放 log 移除 receive function height state update

1.Mounted: react components被 render解析,生成對應的DOM節點,並被插入瀏覽器的DOM結構的一個過程,頁面呈現出來以後,已經mounted了

2.Updated: 一個mounted的react components被重新render的過程,並不是相應的DOM結構一定會改變,react會把這個components的當前state和最近一次的state進行對比,只有當state確實改變並影響到DOM結構的時候,才會改變相應的DOM結構

3.Unmounted: 一個mounted的react components的對應節點被從DOM結構中移除的過程

每一個狀態都封裝了hook函數.

技術分享

1.

getInitialState()

componentWillMount();

The componentDidMount() hook runs after the component output has been rendered to the DOM.

props: 通過組件調用方,在調用組件的時候指定的。一般情況下,props一旦指定,不會改變,especially for 被調用的組件

All React components must act like pure functions with respect to their props.

state: 私屬於當前組件,state值是可變的,state的每次修改,都會造成components從當前狀態進入update階段

State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.

2.componentWillReceiveProps() :當一個mounted的component將要接受新的props時調用,函數參數是新的props對象

shouldComponentUpdate(): 在一個mounted的component已經接受到新的props和新的state之後,判斷是否有必要更新DOM結構;函數的參數有兩個,第一個是新的props對象,第二個是新的state對象

3. componentWillUnMount(): 可以做一些釋放資源的操作,比較少。

React生命周期