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那般去判斷比對了.

React和Vue的組件更新比較