React 組件的生命周期

十、組件的生命周期

組件的生命周期分成三個狀態(tài)：

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

React 為每個狀態(tài)都提供了兩種處理函數，will 函數在進入狀態(tài)之前調用，did 函數在進入狀態(tài)之后調用，三種狀態(tài)共計五種處理函數。

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

此外，React 還提供兩種特殊狀態(tài)的處理函數。

• componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用
• shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調用

這些方法的詳細說明，可以參考官方文檔。下面是一個例子（查看 demo10 ）。

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毫秒，就重新設置組件的透明度，從而引發(fā)重新渲染。

另外，組件的style屬性的設置方式也值得注意，不能寫成

style="opacity:{this.state.opacity};"

而要寫成

style={{opacity: this.state.opacity}}

這是因為 React 組件樣式是一個對象，所以第一重大括號表示這是 JavaScript 語法，第二重大括號表示樣式對象。