ReactJS入门3:组件的生命周期

本文主要介绍组件的生命周期。

组建的生命周期主要分为3个：Mounting、Updating、Unmounting.

1. Mounting:组件被加载到DOM

在本阶段，主要有三个方法：

1.1 getInitialState():object 设置初始状态

1.2 componentWillMount() Mounting发生前调用

1.3 componentDidMount() Mounting发生后调用。该方法主要用于请求DOM节点的初始化。

2.Updating:DOM更新，组件被重新渲染

在本阶段，主要有四个方法：

2.1 componentWillReceiveProps(object nextProps) 当Mounted组件接受新的props时调用。该方法主要用于比较this.props和nextProps以使用this.setState()执行状态转换。

2.2 shouldComponentUpdate(object nextProps,object nextState):boolean 当组件判断是否有保证DOM更新的改变时被调用。使用该方法作为比较this.props和nextProps、this.state和nextState的一种优化。如果React跳过更新，则返回false。

2.3 componentWillUpdate(object nextProps,object nextState) 更新前被调用。该方法内不能调用this.setState().

2.4 componentDidUpdate(object prevProps,object prevState) 更新完成后被调用。

3.Unmounting:组件被移除DOM

在本阶段，只有一个方法：

3.1 componentWillUnmount() 组件被移除和销毁前调用。此处应Cleanup。

4.实例

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.getElementById('content')
);

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

注意：组件的style属性的设置方式也值得注意，不能写成style="opacity:{this.state.opacity};"，而要写成style={{opacity: this.state.opacity}}。这是因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。

浏览器效果：“Hello world”逐渐淡化消失（循环）