React與Vue都有lifecycle生命週期的概念，表示每個元件例項在被建立之前都要經過一系列的初始化過程。比如設定資料監聽、編譯模板、掛載例項到檢視、在資料變化時更新檢視等。

Vue生命週期

所有的生命週期鉤子自動繫結 this 上下文到例項中，因此你可以訪問資料，對屬性和方法進行運算。這意味著 你不能使用箭頭函式來定義一個生命週期方法 (例如 created: () => this.fetchTodos())。這是因為箭頭函式綁定了父上下文，因此 this 與你期待的 Vue 例項不同，this.fetchTodos 的行為未定義。

主要有created、mounted、updated、destroyed，以及各自的before鉤子。相比React多了個特殊的activated和deactivated，該鉤子只在keep-alive

元件才起作用。

demo如下:

    new Vue({
        name: 'demo',
        el: '#demo',
        beforeCreate() {
          //在例項初始化之後，資料觀測 (data observer) 
          //和 event/watcher 事件配置之前被呼叫。 
        },
        created() {
          //在例項建立完成後被立即呼叫。在這一步，
          //例項已完成以下的配置：資料觀測 (data observer)，屬性和方法的運算，
          //watch/event 事件回撥。然而，掛載階段還沒開始，$el 屬性目前不可見。
 

        },
        beforeMoute(){
          //在掛載開始之前被呼叫：相關的 render 函式首次被呼叫。
        },
        mounted() {
          //el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫該鉤子。
          //如果 root 例項掛載了一個文件內元素，當 mounted 被呼叫時 vm.$el 也在文件內。
          /*
          *mounted 不會承諾所有的子元件也都一起被掛載。
          *如果你希望等到整個檢視都渲染完畢，可以用 vm.$nextTick
          */
 

          this.$nextTick(function () {
            // Code that will run only after the
            // entire view has been rendered
          })
        },
        beforeUpdate() {
          //資料更新時呼叫，發生在虛擬 DOM 重新渲染和打補丁之前。
        },
        updated() {
          //資料更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子。
          /*
          *同樣updated不會承諾所有的子元件也都一起被掛載。
          *如果你希望等到整個檢視都渲染完畢，可以用 vm.$nextTick
          */
        },
        beforeDestroy() {
          //例項銷燬之前呼叫。在這一步，例項仍然完全可用。
        },
        destroyed() {
          //Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，
          //所有的事件監聽器會被移除，
          //所有的子例項也會被銷燬。
        }
    });

React生命週期

在元件的整個生命週期中，隨著元件的props或者state發生改變，其視圖表現也會有相應的變化。一個元件就是一個狀態機，對於特定地輸入，它總返回一致的輸出。

一個React元件的生命週期分為三個部分：掛載期（Mounting）、存在更新期（Updating）和銷燬時（Unmounting）。

Mounting

當一個元件例項被建立並且插入到DOM中，以下鉤子將被呼叫
- constructor()
繼承react的props，和設定state的初始化

constructor(props) {
  super(props); //不能缺少
  this.state = {
    color: props.initialColor
  };
}

• componentWillMount()
  

  類似Vue的beforeMoute。

只mount前呼叫一次，在 render 之前呼叫，你可以在這個方法裡面呼叫 setState 改變狀態，並且不會導致額外呼叫一次 render，但是一般不建議這麼做，在constructor中初始話state。
- render()
類似Vue的template 該方法會建立一個虛擬DOM，用來表示元件的輸出。對於一個元件來講，render方法是唯一一個必需的方法。render方法需要滿足下面幾點： 1.只能通過 this.props 和 this.state 訪問資料（不能修改） 2.可以返回 null,false 或者任何React元件 3.只能出現一個頂級元件，不能返回一組並列元素（**react16也支援返回陣列了**） 4.不能改變元件的狀態 5.不能修改DOM的輸出 - componentDidMount()

類似Vue的mounted

只會在裝載完成之後呼叫一次，在 render 之後呼叫，從這裡開始可以通過 ReactDOM.findDOMNode(this) 獲取到元件的 DOM 節點。

Updating

通過改變props或state來驅動檢視的更改，會觸發以下鉤子

• componentWillReceiveProps()
• shouldComponentUpdate()
  在react中這是一個性能優化的關鍵點，當父元件改變，全部子元件都會重新渲染，可以通過該鉤子返回false來阻止渲染，此處還有另外一個方法pureComponent，詳細參考React官方文件，而在Vue中，預設是做了此優化，詳見Vue文件。

shouldComponentUpdate(nextProps, nextState){
    //return boolean
}

• componentWillUpdate()

類似Vue的beforeUpdate、

render()

componentDidUpdate()

類似Vue的updated

Unmounting

• componentWillUnmount()
  

類似Vue的beforeDestroy
元件銷燬之前被呼叫
在此鉤子中，出於效能的考慮需移除在componentDidMount新增的事件訂閱，網路請求等。
demo如下：

import React, { Component } from 'react';

class LikeButton extends Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  handleClick(e) {
    this.setState({ liked: !this.state.liked });
  }

  render() {
    const text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick.bind(this)}>
          You {text} this. Click to toggle.
      </p>
    );
  }

  componentDidMount(){
    //新增事件訂閱，額外的DOM處理
  }

  componentWillUnmount(){
    //移除在componentDidMount新增的事件訂閱，網路請求等
  }
}

總結

在Vue中，state物件並不是必須的，資料由data屬性在Vue物件中進行管理。大型應用的狀態管理框架有Vuex。

export default {
  name: 'app',
  data() {
    return {
      samplePasta: samplePasta,
      orders: {}
    }
  },
...
  methods: {
    handleOrder(){
        //.....
    }
    }
  }
}

而在React中是State驅動檢視概念，對應的有setState()方法去更新狀態，類似的狀態管理框架有redux等。