2.ReactJS組件的生命周期

1. 創建階段

getDefaultProps: 處理this.props默認值。 在React.createClass()被調用。

2.實例化階段

React.render被啟動之后
1>getInitialState : 初始化組件的state值,其返回值會賦值給組件的this.state屬性。 getinitialstate 一它只被調用一次,在組件被掛載時調用。
2>componentWillMount: 組件要被掛載時這個函數被調用,業務邏輯處理均放在這里,如對state的操作。 render 在組件生命周期里被多次調用,我們一般會把只需要執行一次的代碼
3>render: 根據state的值,渲染并返回一個虛擬DOM
4>componentDidMount:一旦你的組件已經運行了 render 函數,并實際將組件渲染到了 DOM 中,componentDidMount 就會被調用。我們可以在這兒做任何需要做的 DOM 操作,已經任何需要依賴于組件已經實際存在于 DOM 之后才能做的事情, 例如渲染一個圖表。你可以通過調用 this.getDOMNode 在內部訪問到 DOM 節點。

state:組件的屬性 主要用來存儲組件自身需要的數據,每次數據的更新都是通過修改state屬性的值。ReactJS內部監聽state屬性的變化,一旦誕生變化,就會主動觸發組件的render方法進行更新虛擬的DOM。
虛擬DOM:將真實的DOM結構隱射成一個JSON數據結構。

3.更新階段

用戶操作之后,
1>componentWillReceiveProps: 該方法發生在this.props被修改,或者父組件調用 setProps()方法之后。
調用this.setState()方法完成對state的修改。
2>shouldComponentUpdate: 用來攔截新的props或state。根據邏輯來判斷是否需要更新。
3>componentWillUpdate: shouldComponentUpdatae返回true時候執行。組件中的render(虛擬DOM結構)方法進行更新。
4>componentDidUpdate:
4.銷毀階段
componentWillUnmount:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容