標籤:
‘use strict‘;React.createClass({ //1.建立階段 getDefaultProps:function(){ //在建立類的時候被調用 console.log(‘getDefaultProps‘); return {}; }, //2.執行個體化階段 getInitailState:function(){ //擷取this.state的預設值 console.log(‘getInitailState‘); return {}; }, componentWillMount:function(){ //在render之前調用 //商務邏輯的處理放這,如對state的操作 console.log(‘componentWillMount‘); }, render:function(){ //渲染並返回一個虛擬DOM console.log(‘render‘); return ( <h1>{this.props.value}</h1> ); }, componentDidMount:function(){ //該方法發生在render方法之後。 //在這裡React會使用render方法返回的虛擬DOM對象來建立真實的DOM結構 console.log(‘componentDidMount‘); }, //3.更新階段 componentWillRecieveProps:function(){ //該方法發生在this.props被修改或父組件調用setProps()方法之後 console.log(‘componentWillRecieveProps‘); }, shouldComponentUpdate:function(){ //是否需要更新 console.log(‘shouldComponentUpdate‘); return true; }, componentWillUpdate:function(){ //將要更新 console.log(‘componentWillUpdate‘); }, componentDidUpdate:function(){ //更新完畢 console.log(‘componentDidUpdate‘); }, //4.銷毀階段 componentWillUnmount:function(){ //銷毀時被調用 console.log(‘componentWillUnmount‘); }});
React組件的生命週期各環節運作流程