React组件的生命周期

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

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

三种状态共计五种处理函数

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

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

• componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
• shouldComponentUpdate(object nextProps, object
  nextState)：组件判断是否重新渲染时调用

示例

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0 //定义初始透明度
    };
  },
//在hello组件加载以后，通过 componentDidMount 方法设置一个定时器
  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);//每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。
  },

  render: function () {
    return (
    // 组件的style属性的设置时，React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

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