react組件的生命週期

標籤：initial   自己   寫在前面   通過   efault   合并   定義   click   image   

寫在前面： 閱讀了多遍文章之後，自己總結了一個。一遍加強記憶，和日後回顧。

一、執行個體化（初始化）

var Button = React.createClass({    getInitialState: function() {        return {    data: 0    };    },    setNewNumber: function() {        this.setState({    data: this.state.data + 1    })    },    render: function() {        var show = (this.state.data % 2 === 0);        return (            <div>            <button onClick = {this.setNewNumber}>INCREMENT</button>            { show && <Content myNumber = {this.state.data}></Content> }      </div>        );    }});var Content = React.createClass({    getDefaultProps: function() {        console.log(‘getDefaultProps‘);        return { name: ‘gdq‘};    },    getInitialState: function() {        console.log(‘getInitialState‘);        return { time: 22 };    },    componentWillMount: function() {        console.log(‘componentWillMount‘)    },    componentDidMount: function() {        console.log(‘componentDidMount‘)    },    render: function() {        return (            <div>          <h3>{this.props.myNumber}</h3>        </div>        );    }});ReactDOM.render(    <div>      <Button />   </div>,    document.getElementById(‘example2‘));

 

 運行結果：

1. 建立階段：getDefaultProps()

　　　　該階段主要發生在定義組件類的時候，即調用React.createClass的時候。這個階段getDefaultProps() 會被調用一次，並緩衝起來——在多個類執行個體之間共用。在組件的任何執行個體被建立之前，我們（的代碼邏輯）不能依賴這裡的this.props。這個方法只負責返回一個對象，然後與合并父組件的相應屬性掛載到this.props中。

　　2.初始化階段：(每個組件被使用的時候都會有,包括Unmount後重新Mount的組件， 如上面的<Conent />)

　　　　getInitialState() ：該方法在組件的一個生命週期中（從初始化掛載到銷毀為一個），只會執行一次；負責返回一個對象，成為this.state的初始值

　　　　componentWillMount() ：在新執行個體掛載到DOM，我們的商務邏輯可以寫在這個階段，例如修改 this.state，啟動個計時器什麼的。

　　　　render() ：返回組件的虛擬DOM，等待reactDOM.render()把該組件渲染都真實的DOM中，

　　　　　　　使用規則

　　　　　　　　　a:只能訪問this.porps, this.state,而不能修該

　　　　　　　　　b:不能操作DOM

　　　　　　　　　c:只能有一個頂級元素

　　　　　　　　　d:可以返回null, false, 任何組件

　　　　componentDidMount() ：組件成功渲染到真實DOM後開始執行，在該方法中可通過this.getDOMNode()訪問到真實的DOM元素。此時已可以使用其他類庫來操作這個DOM。（在服務端渲染中，該方法不會被調用)。例如：發送ajax請求。

 

 二、存在期（組件已經掛載到真實DOM中，主要就是更新操作）

var Button = React.createClass({    getInitialState: function() {        return {    data: 0    };    },    setNewNumber: function() {        this.setState({    data: this.state.data + 1    })    },    render: function() {        return (            <div>            <button onClick = {this.setNewNumber}>INCREMENT</button>            <Content myNumber = {this.state.data}></Content>      </div>        );    }});var Content = React.createClass({    componentWillReceiveProps: function(newProps) {        console.log(‘componentWillReceiveProps‘)    },    shouldComponentUpdate: function(newProps, newState) {        console.log(‘shouldComponentUpdate‘);        return true;    },    componentWillUpdate: function(nextProps, nextState) {        console.log(‘componentWillUpdate‘);    },    componentDidUpdate: function(prevProps, prevState) {        console.log(‘componentDidUpdate‘)    },    render: function() {        return (            <div>          <h3>{this.props.myNumber}</h3>        </div>        );    }});ReactDOM.render(    <div>      <Button />   </div>,    document.getElementById(‘example2‘));

 

結果：

 

　　1.更新階段有兩種情況觸發，其實就是

　　　　a: this.props  (從父組件接收的props發生改變)

　　　　b: this.state (自己的內部狀態發生改變。 this.setState({...}),觸發）

　　2.其實就是a情況比b情況多一個componentWillReceiveProps階段

　　　　componentWillReceiveProps(newProps) : 參數為新接收的props對象，在此階段允許我們配合newProps修改this.state(是更新階段唯一可以修改　this.state 的地方)

　　　　shouldComponentUpdate(nextProps, nextState) : 返回true(預設)/false， 判斷是否執行本次更新。若為false，則跳過後面階段，不執行更新。

　　　　　　　　a: 不允許修改props,state(this和next都不允許)

　　　　　　　　b: 一般不需要使用，只在項目進入效能瓶頸時，在這裡進行效能最佳化 

 　　　　componentWillUpdate(nextProps, nextState) ：與componentWillMount方法類似，組件上會接收到新的props或者state渲染之前，調用該方法。但是不可以在該方法中更新state和props。　　

 　　　　render() : 構建虛擬DOM，並返回

 　　　　componentDidUpdate() : 組件在真實DOM中渲染後執行

三、卸載期（組件從真實DOM中卸載的時候執行）

　　comonentWillUnmount() :組件被移除(從真實DOM中卸載)之前被調用，可以用於做一些清理工作，在componentDidMount方法中添加的所有任務都需要在該方法中撤銷，比如建立的定時器或添加的事件監聽器。

 

react組件的生命週期