React的初始化阶段

<div id="box"></div>
<div id="box1"></div>

<script type="text/babel">
var Hello = React.createClass({
//1、设置默认属性 getDefaultProps 不需要渲染到界面上就会执行
// 属性 是属于 整个组件类的， 初始化一些属性 （可以在对象实例化时进行修改）
getDefaultProps:function(){
console.log("1-getDefaultProps");
return {name:"James"};
},

//2、设置默认的状态
getInitialState : function(){
console.log("2-getInitialState");
return null;
},
//3、组件将要被加载
componentWillMount : function(){
console.log("3-componentWillMount");
console.log(ReactDOM.findDOMNode(this));
},

//4、渲染界面
render:function(){
console.log("4-render");
console.log(ReactDOM.findDOMNode(this));
return <div><h1 style={{color:"red"}}>{this.props.name||"World"}</h1></div>
},
//5、加载完成 存在真实的DOM节点（可以进行修改）
componentDidMount : function(){
console.log("5-componentDidMount");
console.log(ReactDOM.findDOMNode(this));

$(ReactDOM.findDOMNode(this)).append('追加文字');
},
});

ReactDOM.render(<Hello name="wwwwww"> 123456</Hello>,document.getElementById('box'));
ReactDOM.render(<Hello name="wwwwww"> 123456</Hello>,document.getElementById('box1'));
</script>