React和Vue的組件更新比較

 

React組件的屬性

React是一個單純的view層框架,官方推薦使用JSX預發來維護組件的狀態.經過Props和state來共同決定組件的表現.

• Props
  正如prop的英文意思[屬性]同樣,Props中的數據主要用來定義和描述組件的屬性,該數據是由父組件在聲明React組件的時候設置,就比如咱們給一個img標籤設置一個src屬性同樣,咱們能夠給自定義的React組件設置許多屬性. 這些屬性定義了React組件的表現形式,父組件能夠經過修改Props中的屬性來控制子組件的表現.
• state
  一樣的,state表示[狀態],那麼state中的數據主要用來控制組件內部的狀態. 也就是說組件內部的變化,不須要同外部有交互的數據,均可以有組件本身經過state來控制.

React 虛擬樹更新原則

React中應用虛擬DOM來更新快速更新DOM,那麼更新虛擬DOM的原則主要是如下幾種:

• 不一樣元素
  若是更新先後是兩種不一樣類型的DOM元素,那就沒什麼說的,直接銷燬原來的節點,建立新的節點.(好比原來是div,更新爲span)在這個過程當中,原來節點的componentWillUnmount函數被觸犯, 新節點的componentWillMount和componentDidMount依次被觸發. 須要特別指出的是,當前更新節點的全部子節點都會被銷燬重建,而無論子節點是否有更新. 簡單的來講,就是根變了,那麼這個根上的全部葉子都要更新了.
• 相同元素,不一樣屬性
  當節點類型沒有發生變化,而只是熟悉變化的話,React就智能多了,只會更新變化的部分. 比如是一個元素有多個CSS樣式,若是隻變化了一個樣式,那麼React也只更新一個. 當元素不是葉子節點的時候,也就是一個組件元素的時候,會繼續深刻的去比較子元素來更新子元素.
• 子元素變更.
  當子元素有變更的時候,React會更新子元素.
  子元素的變更指的是資源的類型/屬性/位置等的變更. 類型和屬性的變更會觸發更新,這個比較好理解.子元素的位置變更,指的是若是一個資源原來在第一位,更新後到第二位了,React會認爲這是一種變更,從而觸發更新.
• key屬性的重要做用
  這樣看起來React也沒有那麼智能.那麼這個時候就要引入一個很重要的key屬性.React經過給子組件一個key屬性.來惟一標識一個子組件,若是更新先後的組件key值同樣,而且除了位置以外其餘屬性沒有變化,那麼就不會觸發更新.
  
  

Vue的數據

 

Vue是一個傳統意義上的mvc模型.經過實例化一個vue對象來綁定dom和data的關係,也就是綁定view和model.經過對model中每一個屬性添加[反射]來完成監視器的註冊. 當model中的數據模型變化時,watcher會從新計算,從而引起view層的更新.

這也就是理解了爲何Vue是單向數據流了

 

Vue的更新.

上面提到,vue的更新是model中數據的變化引起在初始化時注入的watcher的變化,從而引發view層的更新.只要觀察到數據變化，Vue 將開啓一個隊列，並緩衝在同一事件循環中發生的全部數據改變。若是同一個 watcher 被屢次觸發，只會一次推入到隊列中。

根據以上特色,咱們知道vue中的組件更新是有model數據的更新引發的,由於view和model在初始化時已經完成綁定,因此當model發生變化時,哪些view須要變化已經很明確了,因此就不須要像React那般去判斷比對了.