react組件的生命周期 - miaowwwww－IT工程師數位筆記本

文章出處

寫在前面：

　　閱讀了多遍文章之后，自己總結了一個。一遍加強記憶，和日后回顧。

一、實例化（初始化）

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')
);

運行結果：

創建階段：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')
);