react-组件的生命周期
组件生命周期：
命令式编程：jquery（自己寻找要操作的DOM元素，自己写要做的事情）
声明式编程：react（只需要在钩子函数中写东西即可，不需要执行钩子函数）
这些钩子函数是本身就会执行的，我们重写了一部分，是为了在这个组件的某个时期做一些事情。
生命周期流程:
1. 第一次初始化渲染显示: ReactDOM.render()
* constructor(): 创建对象初始化 state
* componentWillMount() : 将要插入回调
* render() : 用于插入虚拟 DOM 回调
* componentDidMount() : 已经插入回调
2. 每次更新 state: this.setSate()
* componentWillUpdate() : 将要更新回调
* render() : 更新(重新渲染)
* componentDidUpdate() : 已经更新回调
3. 移除组件: ReactDOM.unmountComponentAtNode(containerDom)
* componentWillUnmount() : 组件将要被移除回调
重要的勾子
1) render(): 初始化渲染或更新渲染调用
2) componentDidMount(): 开启监听, 发送 ajax 请求
3) componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
4) componentWillReceiveProps(): 后面需要时讲
代码例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>work9</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/prop-types.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
class Life extends React.Component{
constructor(props){
super(props)
//初始化状态
this.state={
opacity:1
}
this.distroyComponent=this.distroyComponent.bind(this)
}
componentDidMount(){
//启动循环定时器
this.intervalId=setInterval(function () {
console.log("定时器执行了")
let {opacity}=this.state //这里的this，属于window
opacity -= 0.1
if(opacity<=0){ //这里的减法有些误差，所以要小于等于0
opacity=1
}
this.setState({opacity})
}.bind(this),200)
}
distroyComponent(){
ReactDOM.unmountComponentAtNode(document.getElementById("example"))
}
componentWillUnmount(){
//清理定时器
clearInterval(this.intervalId)
}
render(){
const {opacity}=this.state
//下面style中：第一个大括号的作用说明里面开始了js代码，第二个大括号代表是style里面的对象；
return(
<div>
<h2 style={{opacity:opacity}}>{this.props.msg}</h2>
<button onClick={this.distroyComponent}>爱网球</button>
</div>
)
}
}
ReactDOM.render(<Life msg="iwantiwantiwantiwant"/>,document.getElementById("example"))
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>
