ReactJS学习系列课程（组件的生命周期）

对于任何一个框架，或者组件而言，都有其生命周期的定义，比如从定义到销毁，会有一定的流程在其中控制，以前我们接触过IONIC, 不得不说这个框架对生命周期的定义是非常完美的，也为开发者提供了很多的便利。

那么，对于React而言，是基于Component的一个框架，那么我们今天来谈谈Componet的生命周期是一个什么样的状态呢？

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object

nextState)：组件判断是否重新渲染时调用

对于常用前端框架的同学，不难看出，React的生命周期定义是不是很完美，个人感觉不差于IOS的object-c ，swift, 还有html5的IONIC, 当然这也只是个人看法，勿喷。

理论固然空虚，还是上代码吧，哈哈

var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},

componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},

render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});

React.render(
<Hello name="world"/>,
document.body
);

上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。

这里也做一个小小的延伸，在React中我们定义class,要用className来定义，因为class是关键字哦。

还有 style的写法也不同，看看上面代码你就明白了！

怎么样，了解了吗？