在React中，组件从创建，插入，渲染，移除真实组件整个过程中，我们可以根据组件所处的状态。触发特定的事件。 官方参考文档 组件的生命周期严格来说分为3个状态， Mounting：已插入真实 D
在React中，组件从创建，插入，渲染，移除真实组件整个过程中，我们可以根据组件所处的状态。触发特定的事件。 官方参考文档
组件的生命周期严格来说分为3个状态，
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
每种状态都有2个事件可以触发，will进入该状态之前调用，did进入状态之后调用。
然后，结合起来分为5种状态，移出真实DOM以后就不会触发状态类事件了。所以共有5种事件。
- componentWillMount() //插入真实DOM之前触发
- componentDidMount() //插入真实DOM后触发
- componentWillUpdate(object nextProps, object nextState) //被渲染之前触发
- componentDidUpdate(object prevProps, object prevState) //被渲染时触发
- componentWillUnmount() //移出真实DOM前触发
除此以外还有2个特殊的事件。
- 组件加载好了，但是收到了新的参数时触发componentWillReceiveProps(object nextProps)：
- 组件重新渲染时触发shouldComponentUpdate(object nextProps, object nextState);
完整代码
<!DOCTYPE html><html><meta charset="UTF-8"><head><script src="../build/react.js"></script><script src="../build/react-dom.js"></script><script src="../build/browser.min.js"></script></head><body><div id="diy"></div><!--在JXS中，最好不要写注释容易报错--><!--input标签的/一定要写，否则报错--><script type="text/babel">//setInterval()里面一定要使用bind，只用setInterval会报错。//使用bind后，this代表的是本函数。不使用bind时，this代表window var MyColor = React.createClass({ getInitialState : function(){ return {opacity : 1.0} }, componentDidMount : function (){ console.log("componentDidMount"+this); this.timer = setInterval(function(){ console.log("setInterval"+this); var opacity = this.state.opacity; opacity -= 0.05; if(opacity < 0.1){ opacity = 1.0; } this.setState({opacity : opacity}); }.bind(this),100) }, render : function(){ return( <div style={{opacity : this.state.opacity}}> 你好,{this.props.name} </div> ) } }) ReactDOM.render(<MyColor name="这段话会循环的显示隐藏"/>,document.getElementById("diy"));</script></body></html>在上面，setInterval()是定时执行函数。正常用法为setInterval(fn(),time).opacity属性是透明度属性。通过每秒透明度减小1/20，达到逐渐透明的目的。
bind和setInterval的区别
但是在这里不能这么用。bind()该函数改变了this的含义。
使用bind()时，浏览器打印的this为object object。
当不使用bind().只调用setInterval函数时，浏览器打印的this为object window；
style注意点
style官方文档
另外，组件的style属性的设置方式也值得注意，不能写成
style="opacity:{this.state.opacity};"
而要写成
style={{opacity: this.state.opacity}}
React中第一个大括号替换了""写法，第二层大括号是一个对象。所以，这里要使用双层大括号。
