react 學習--元件的生命週期（一）初始化階段

var style = {
        "width":"100%",
        "lineheight":"30px",
        "color":"red",
        "border":"solid 1px gray"
    };

    var count = 0;

    // 定義一個helloworld元件
    var HelloWorld = React.createClass({
        // 1.只呼叫一次，例項之間共享引用
        getDefaultProps:function () {
            console.log("getDefaultProps,1");
            return {
                name:"Tom"
            };
        },
        // 2.初始化每個例項特有的狀態
        getInitialState:function () {
            console.log("getInitialState,2");
            return {
                myCount:count++,
                ready:false
            };
        },
        // 3.render之前最後一次修改狀態
        componentWillMount:function () {
            console.log("componentWillMount,3");
            this.setState({
                ready:true
            })
        },
        // 4.只能訪問this.props和this.state，不允許修改狀態和dom輸出
        render:function () {
            console.log("render,4");
            return (
                    <div style={style}>
                        <p ref="childp">{this.state.myCount},Hello,{(function (obj) {
                            return obj.props.name||"world";
                        })(this)}<br/>{this.state.ready}</p>
                    </div>
            );
        },
        // 5.只呼叫一次，等頁面上所有元件渲染真實的DOM完畢後，可修改DOM
        componentDidMount:function () {
            console.log("componentDidMount,5");
            ReactDOM.findDOMNode(this).innerHTML += " haha";
        }

    });
    // 渲染節點
    ReactDOM.render(<div><HelloWorld name = "xiaopeng"/><br/>
                    <HelloWorld name = "xiaopeng"/><br/>
                    <HelloWorld name = "xiaopeng"/><br/>
                    </div>,document.getElementById("app"));