第一章、react 组件的生命周期

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

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

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

• componentwillMount()
• componentDidMount()
• componentwillUpdate(object nextProps,object nextState)
• componentDidUpdate(object prevProps,object prevstate)
• componentwillUnmount()

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>
    );
  }
});

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