對於任何一個框架，或者元件而言，都有其生命週期的定義，比如從定義到銷燬，會有一定的流程在其中控制，以前我們接觸過IONIC, 不得不說這個框架對生命週期的定義是非常完美的，也為開發者提供了很多的便利。

那麼，對於React而言，是基於Component的一個框架，那麼我們今天來談談Componet的生命週期是一個什麼樣的狀態呢？

元件的生命週期分成三個狀態：

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

React 為每個狀態都提供了兩種處理函式，will 函式在進入狀態之前呼叫，did 函式在進入狀態之後呼叫，三種狀態共計五種處理函式。

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

此外，React 還提供兩種特殊狀態的處理函式。

• componentWillReceiveProps(object nextProps)：已載入元件收到新的引數時呼叫
• shouldComponentUpdate(object nextProps, object
  nextState)：元件判斷是否重新渲染時呼叫

對於常用前端框架的同學，不難看出，React的生命週期定義是不是很完美，個人感覺不差於IOS的object-c ，swift, 還有html5的IONIC, 當然這也只是個人看法，勿噴。

理論固然空虛，還是上程式碼吧，哈哈

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毫秒，就重新設定元件的透明度，從而引發重新渲染。

這裡也做一個小小的延伸，在React中我們定義class,要用className來定義，因為class是關鍵字哦。

還有 style的寫法也不同，看看上面程式碼你就明白了！

怎麼樣，瞭解了嗎？