react：
组件的生命周期
react设计组件的时候，将组件设计设计成有生命的，因此他就有创建的时候，成长更新的时候，死亡销毁的时候。
创建组件的周期：
- getDefaultProps 获取组件的属性
- getInitialState 设置初始化状态
- componetWillMount 组件即将被创建
- render 渲染输出虚拟dom
- componentDinMount 组件构建完成
创建一个组件都会经历以上过程，那么在组件对象过程中声明这些方法，这些方法就会被调用。
按顺序执行，先执行的返回值能被后执行的获取到，反之获取不到；
======================================================================================
来看看他们的执行
var GoBack = React.createClass({
getDefaultProps:function(){
console.log(111,'getDefaultProps',this.state)
return {
title:''
}
},
getInitialState:function(){
console.log(222,'getInitialState',this.props)
return{
stateTitle:this.props.title
}
},
componentWillMount:function(){
console.log(333,'componentWillMount')
},
render :function(){
console.log(444,'render')
return (
<div className="go-back">返回顶部</div>
)
},
componentDidMount:function(){
console.log(555,'componentDidMount')
}
})
ReactDOM.render(< GoBack />,document.getElementById('app'))
输出的结果为：
111 "getDefaultProps" undefined
222 "getInitialState" Object {title: ""}
333 "componentWillMount"
444 "render"
555 "componentDidMount"
==========================================================================
如果做如下改变：
ReactDOM.render(< GoBack title="返回顶部"/>,document.getElementById('app'))
那么222的输出为：
"getInitialState" Object {title: "返回顶部"}
componentWillMount状态下输出this.state和this.props:
Object {stateTitle: "返回顶部"} Object {title: "返回顶部"}
对于创建组件生命的五个阶段都会只执行一次，除了render
在render或者componentDidMount中写入
var me = this;
setTimeout(function(){
me.setState({
stateTitle:'修改后的'
})
},1000)
会发现render会稍后再次执行；
==========================================================================================
子组件
我们可以看做是一个虚拟自定义dom元素,只不过这个元素比较特殊，这个自定义的虚拟dom具有一些特殊的功能，并且组件的名称首字母大写；除此之外和正常的dom元素一样；
所以我们可以将组件像虚拟dom元素一样使用，那在组件内部使用其他组件的时候，这些组件就被嵌套到该组件内作为子组件；
- 作为一个父组件的子组件，我们可以通过属性传递数据信息，我们直接在父组件中对子组件添加属性，这样子组件就可以获取信息了。
作为一个父组件的子组件，我们可以通过父组件的属性{this.props.title}将父组件中内部的数据传递给子组件
var GoBack = React.createClass({
getDefaultProps:function(){
return {
title:'返回顶部'
}
},
render :function(){
return (
<div className="go-back">{this.props.title}</div>
)
}
})
//有个main组件，放所有的组件
//将goback组件放在main组件内
var Main = React.createClass({
//属性传递 可以通过props获取组件中的属性
render:function(){
return (
<div className="main">
<GoBack title={this.props.title}/>
</div>
)
}
})
ReactDOM.render(<Main title="返回顶部1"/>,document.getElementById('app'))
输出的是:返回顶部1
=======================================================================================
我们还可以通过父组件的状态state，将父组件内部的状态传递给子组件：
var GoBack = React.createClass({
getDefaultProps:function(){
return {
title:'返回顶部'
}
},
getInitialState:function(){
return{
stateTitle:this.props.title
}
},
render :function(){
return (
<div className="go-back">{this.props.title}</div>
)
}
})
//有个main组件，放所有的组件
//将goback组件放在main组件内
var Main = React.createClass({
changeGoBackText:function(){
this.setState({
text:'更改文案'
})
},
getInitialState:function(){
return {
text:''
}
},
//属性传递 可以通过props获取组件中的属性
render:function(){
console.log(this.state)
return (
<div className="main">
<button onClick={this.changeGoBackText}>点击我改变顶部的文案</button>
<GoBack title={this.state.text}/>
</div>
)
}
})
ReactDOM.render(<Main title="返回顶部1"/>,document.getElementById('app'))
更改文案会在点击后显示在页面节点中；
==========================================================================================================
对于第一种方式，父组件向子组件传递数据的时候，是固定的，当父组件更新的时候，是没办法更新子组件的属性；
如：
<GoBack title="父组件的信息" />
后两种一旦父组件内部状态属性改变的时候，会更新子组件的属性
如:上述两个代码的props和state
========================================================================================================
组件的成长更新周期
一旦组件被创建，那么就进入了组件存在期，在存在期，每次组件更新的时候会进入五个阶段。
- componentWillReceiveProps:表示组件将要接收新的属性
有个参数：nextProps 表示新的属性
在这个方法中，我们可以获取到组件更新的属性 - shouldComponentUpate:表示组件是否应该更新，返回一个布尔值，true表示要对组件更新，false不要对组件更新,后面阶段就不会再执行；接收两个参数，第一个参数nextprops表示下一个属性，第二个参数nextstate表示下一个状态；
- componentWillUpdate:表示组件将要被更新，接收两个参数，第一个参数nextprops表示下一个属性，第二个参数nextstate表示下一个状态；
- render:表示重新渲染组件，所以创建的五个阶段中render会调用多次的原因就在于这，更新的时候也会调用；
- componentDidUpdate:表示组件已经被更新，接收两个参数，第一个参数表示前一个属性，第二个参数表示前一个状态；
这些方法在组件第一次创建不会执行，componentWillReceiveProps方法在组件内部状态更新的是不会被调用
================================================================================================
感受一下：
var GoBack = React.createClass({
getDefaultProps:function(){
console.log(111,'getDefaultProps',this.state)
return {
title:'返回顶部'
}
},
getInitialState:function(){
console.log(222,'getInitialState',this.props)
return{
stateTitle:this.props.title
}
},
componentWillMount:function(){
console.log(333,'componentWillMount',this.state , this.props)
},
render :function(){
console.log(444,'render')
return (
<div className="go-back">{this.props.title}</div>
)
},
componentDidMount:function(){
console.log(555,'componentDidMount')
var me = this;
setTimeout(function(){
me.setState({
stateTitle:'修改后的'
})
},1000)
},
//更新的五个阶段
componentWillReceiveProps:function(nextProps){
console.log(1,nextProps,'componentWillReceiveProps')
},
shouldComponentUpdate:function(nextProps,nextState){
console.log(2,nextProps,nextState,'shouldComponentUpdate')
return true;
},
componentWillUpdate:function(nextProps,nextState){
console.log(3,nextProps,nextState,'componentWillUpdate')
},
componentDidUpdate:function(prevProps,prevState){
console.log(5,prevProps,prevState,'componentDidUpdate')
}
})
//有个main组件，放所有的组件
//将goback组件放在main组件内
var Main = React.createClass({
changeGoBackText:function(){
this.setState({
text:'更改文案'
})
},
getInitialState:function(){
return {
text:''
}
},
//属性传递 可以通过props获取组件中的属性
render:function(){
console.log(this.state)
return (
<div className="main">
<button onClick={this.changeGoBackText}>点击我改变顶部的文案</button>
<GoBack title={this.state.text}/>
</div>
)
}
})
ReactDOM.render(<Main title="返回顶部1"/>,document.getElementById('app'))
刷新页面输出：
111 "getDefaultProps" undefined
Object {text: ""}
222 "getInitialState" Object {title: ""}
333 "componentWillMount" Object {stateTitle: ""} Object {title: ""}
444 "render"
555 "componentDidMount"
2 Object {title: ""} Object {stateTitle: "修改后的"} "shouldComponentUpdate"
3 Object {title: ""} Object {stateTitle: "修改后的"} "componentWillUpdate"
444 "render"
5 Object {title: ""} Object {stateTitle: ""} "componentDidUpdate"
之所以出现了两个次render，是因为我们在代码里写了setTimeout，注释这段代码刷新页面输出：
111 "getDefaultProps" undefined
Object {text: ""}
222 "getInitialState" Object {title: ""}
333 "componentWillMount" Object {stateTitle: ""} Object {title: ""}
444 "render"
555 "componentDidMount"
点击按钮onclick事件触发更新输出：
Object {text: "更改文案"}
1 Object {title: "更改文案"} "componentWillReceiveProps"
2 Object {title: "更改文案"} Object {stateTitle: ""} "shouldComponentUpdate"
3 Object {title: "更改文案"} Object {stateTitle: ""} "componentWillUpdate"
444 "render"
5 Object {title: ""} Object {stateTitle: ""} "componentDidUpdate"
================================================================
组件的销毁期
是组件声明周期的最后一个阶段，到了这个阶段，也就是说组件要死亡了，这个周期只有一个方法：
- componentWillUnmount:组件即将在dom树中删除；
这个方法没有参数；
如何替换页面的显示：
例如：我们点击一个按钮，正在ajax异步请求的时候显示正在加载的内容，当内容请求回来组建成功后，删除正在加载的组件，替换为内容组件（这里就是重新渲染新的组件即把原组件删除），为方便实现，我们通过异步的setTimeout来模拟ajax加载；
var Loading = React.createClass({
render:function(){
return (
<h1>模块加载中</h1>
)
},
componentWillUnmount:function(){//这是为了能看到销毁这一步骤，这句并不需要
console.log('componentWillUnmount',arguments)
}
})
var News = React.createClass({
render:function(){
return(
<div>
<h1>新闻标题</h1>
<p>新闻内容</p>
</div>
)
}
})
//将loading组件渲染到页面中
ReactDOM.render(<Loading />,document.getElementById('app'))
//发送异步请求，获取新闻木块的数据，模拟
setTimeout(function(){
//删除loading组件，并将news组件渲染到页面中
ReactDOM.render(<News />,document.getElementById('app'))
},2000)
=================================================================
我们来模拟一次完整的创建、更新和销毁的过程：
var Loading = React.createClass({
getDefaultProps:function(){
console.log(111,'getDefaultProps',this.state)
return {
title:'返回顶部'
}
},
getInitialState:function(){
console.log(222,'getInitialState',this.props)
return{
stateTitle:this.props.title
}
},
componentWillMount:function(){
console.log(333,'componentWillMount',this.state , this.props)
},
componentDidMount:function(){
console.log(555,'componentDidMount')
var me = this;
setTimeout(function(){
me.setState({
stateTitle:'修改后的'
})
},2000)
},
//更新的五个阶段
componentWillReceiveProps:function(nextProps){
console.log(1,nextProps,'componentWillReceiveProps')
},
shouldComponentUpdate:function(nextProps,nextState){
console.log(2,nextProps,nextState,'shouldComponentUpdate')
return true;
},
componentWillUpdate:function(nextProps,nextState){
console.log(3,nextProps,nextState,'componentWillUpdate')
},
componentDidUpdate:function(prevProps,prevState){
console.log(5,prevProps,prevState,'componentDidUpdate')
},
render:function(){
console.log("444，render")
return (
<h1>模块加载中</h1>
)
},
componentWillUnmount:function(){
console.log('销毁componentWillUnmount',arguments)
}
})
var News = React.createClass({
render:function(){
return(
<div>
<h1>新闻标题</h1>
<p>新闻内容</p>
</div>
)
}
})
//将loading组件渲染到页面中
ReactDOM.render(<Loading />,document.getElementById('app'))
//发送异步请求，获取新闻木块的数据，模拟
setTimeout(function(){
//删除loading组件，并将news组件渲染到页面中
ReactDOM.render(<News />,document.getElementById('app'))
},5000)
上面首先输出了创建的五个状态：
111 "getDefaultProps" undefined
222 "getInitialState" Object {title: "返回顶部"}
333 "componentWillMount" Object {stateTitle: "返回顶部"} Object {title: "返回顶部"}
444，render
555 "componentDidMount"
接着根据componentDidMount中修改了state状态引发更新输出：
2 Object {title: "返回顶部"} Object {stateTitle: "修改后的"} "shouldComponentUpdate"
3 Object {title: "返回顶部"} Object {stateTitle: "修改后的"} "componentWillUpdate"
444，render
5 Object {title: "返回顶部"} Object {stateTitle: "返回顶部"} "componentDidUpdate"
最后销毁loading组件这一步输出：
销毁componentWillUnmount []
===============================================================================
