<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>
<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>
<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var MyComponent = React.createClass({
clickHandle : function () {
this.setState({
count: this.state.count + 1
})
},
//1.创建阶段
getDefaulProps : function () {
//在创建类的时候被调用
console.log('getDefaultProps');
return {
count: 0
}
},
getInitialState: function () {
//获取this.state的默认值
console.log('getInitialState');
return {}
},
componentWillMount : function () {
//在render之前调用此方法
//业务逻辑的处理都应该放在这里，比如对state的操作等
console.log('componentWillMount')
},
render: function () {
//渲染并返回一个虚拟DOM
console.log('render');
return (
<div>
hello
<h1>{this.props.name} </h1>
<button onClick={this.clickHandle}>Click me</button>
</div>
)
},
componentDidMount : function () {
//该方法发生在render方法之后
//在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实DOM结构
console.log('componentDidMount');
console.log('###end###')
},
//3.个更新阶段
componentWillReceieveProps: function() {
//该方法发生在this.props被修改或父组件调用setProps()方法之后
console.log('componentWillRecieveProps');
},
shouldComponentUpdate: function() {
//是否需要更新
console.log('shouldComponentUpdate');
return true;
},
componentWillUpadate: function() {
//将要更新
console.log('componentWillUpadate');
},
componentDidUpdate: function() {
//更新完毕
console.log('componentDidUpdate');
},
//4.销毁阶段
componentWillUnmout: function() {
//销毁时被调用
console.log('componentWillUnmout');
}
})
React.render(
<MyComponent name="World " />,
document.getElementById('example')
)
</script>
</body>
生命周期各阶段
在整个ReactJS的声明周期中，主要会经历这四个阶段：创建阶段、实例化阶段、更新阶段、销毁阶段
创建阶段：
该阶段主要发生在创建组件类的时候，即在调用React.createClass的时候。这个阶段只会触发一个getDefaultProps方法，该方法会返回一个对象，并缓存下来。然后与父组件制定的props对象合并，最后赋值给this.props作为该组件的默认属性。
实例化阶段
该阶段主要发生在实例化组件类的时候，也就是组件类被调用的时候。
React.render(
<MyComponent name="World " />,
document.getElementById('example')
)
该组件被调用的时候，这个阶段会触发一系列的流程，具体的执行顺序如下所示。
-
getInitialState。
初始化组件的state的值，其返回值会赋值给组件的this.state属性。
-
componentWillMount 在渲染（挂载）之前调用一次。
此时this.refs对象为空。如果在此时调用this.setState()则会更新this.state对象
-
render
根据state的值，生成页面需要的虚拟DOM结构，并返回该结构
-
componentDidMount
在渲染之后调用一次。根据虚拟DOM结构而生成的真实DOM进行相应的处理，组件内部可以通过this.getDOMNode()来获取当前组件的节点，然后就可以像在web开发中那样操作里面的DOM元素了。
componentDidMount : function () {
//该方法发生在render方法之后
//在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实DOM结构
console.log('componentDidMount');
console.log('###end###')
},
更新阶段
主要发生在用户操作或者组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整。该阶段也会触发一系列的流程，具体的执行顺序如下所示。
-
componentWillReceiveProps
在将要接收props时调用。在该函数中，通常可以调用this.setState方法来完成对state的修改。
props是父组件传递给资组建的。父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）。
componentWillReceieveProps: function() {
//该方法发生在this.props被修改或父组件调用setProps()方法之后
console.log('componentWillRecieveProps');
},
shouldComponentUpdate
该方法用来拦截新的props或state，然后根据事先设定好的判断逻辑，返回值决定组件是否需要update。
组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。
shouldComponentUpdate: function() {
//是否需要更新
console.log('shouldComponentUpdate');
return true;
},
-
componentWillUpdate ：
组件更新之前调用一次。当上一部中shouldComponentUpdate方法返回true时候，就可以在该方法中做一些更新之前的操作。
-
render
根据一系列的diff算法，生成页面需要的虚拟DOM结构，并返回该结构。实际表明，在render中，最好只做数据和模板的结合，而不进行state等逻辑的修改，这样组件结构更清晰。
-
componentDidUpdate 组件的更新已经同步到DOM中后出发。
除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。
销毁阶段
-
componentWillUnmount
会在组件即将从挂载点移去时调用，用来取出去除即将被销毁的DOM节点的引用，或者是清除计时器，取消监听的时间等等。
componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。
