Vue與React的異同生命週期（一）

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

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

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

具體生命週期圖示參考vue文件

demo如下:

new vue(,
created() ,
beforemoute(),
mounted() )
},beforeupdate() ,
updated() ,
beforedestroy() ,
destroyed() 
});

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

乙個react元件的生命週期分為三個部分：掛載期（mounting）、存在更新期（updating）和銷毀時（unmounting）。

mounting

當乙個元件例項被建立並且插入到dom中，以下鉤子將被呼叫

- constructor()

繼承react的props，和設定state的初始化

constructor
(props)
;}

只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來驅動檢視的更改，會觸發以下鉤子

shouldcomponentupdate(nextprops, nextstate)

類似vue的beforeupdate、

類似vue的beforedestroy

元件銷毀之前被呼叫

在此鉤子中，出於效能的考慮需移除在componentdidmount新增的事件訂閱，網路請求等。

demo如下：

import react,  from 'react';
class
likebutton
extends
component ;
}  handleclick(e) );
}  render() >
you  this. click to toggle.
);}  componentdidmount()
componentwillunmount()
}

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

export default }},
...  methods: 
}}}

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

Vue與React的異同生命週期（一）

React和Vue的異同

VUE例項的生命週期與VUE元件的生命週期

react 體驗 react與vue的比較

Vue與React的異同 生命週期（一）

React和Vue的異同

VUE例項的生命週期與VUE元件的生命週期

react 體驗 react與vue的比較

相關推薦

Vue與React的異同生命週期（一）