close

雖然每天主要還是使用Vue,不過因為一些需求,而開始接觸到一些跟React有關的東西,也就開始跟同事討論一些React的寫法。這次就來從最最基本的部分開始從Vue與React的比較學習React!也就是基本到不行的state和props!

State部分
Vue
不論是Vue2還是Vue3,在data(state)部分都有一個特點,就是當data(state)有變動時,畫面上也會顯示對應的變動,不需要另用使用set函式去變更data(state)
Vue2:在Vue2裡,只要將state放在data(黃框的部分)裡面,就會有這樣自動響應的效果,只要呼叫addCount函式(紅框部分),count數字就會變動,畫面上顯示的count也會是變動後的數字。
image
Vue3:在Vue3裡,需要另外用ref或是reactive包裝起來,才會有這樣自動響應的效果,在下面的情境,因為count有使用ref(黃框部分),所以當count有變動,畫面就會同步顯示變動後的數字。
image

React
如果寫React的Functional Component的話(下面的例子),需要使用useState這個hook,來定義出要使用的state。另外如果需要變更這個state時,需要用拿useState取得的setState來變動state,如同下方的setCount,無法像Vue一樣直接對count操作。如果是寫Class Component一樣也是需要拿setState下去操作要變動的state。
image



Props部分

Vue
在Vue裡,要把父層的狀態用prop帶入子元件時,會需要用v-bind帶入,並且在子元件裡面定義prop。
carbon (65)
如果要從子元件操作props,則需要透過emit事件給父層,讓父層知道該執行操作data的動作。
子元件
image
父元件
image


React
在React裡,一樣要先在父層把要prop帶入的state寫上,在子元件裡面則是用參數取得props放入要使用的地方。
carbon (64)
如果要從子元件操作props,需要將進行setState的function透過prop傳到子元件,在把這個function綁定到子元件上。
子元件
image
父元件
image


總結
最後用一個比較圖表來做個小小的總結。
image

這次的主題很簡單,但自己也從比較的過程中,把一些自己原本有點模糊的地方再搞懂一些。
好啦!這次的小小廢文,就到此結束啦!
那就寫些打家,打家擺掰!



 

arrow
arrow
    創作者介紹
    創作者 文科少女寫程式 的頭像
    文科少女寫程式

    文科少女學程式

    文科少女寫程式 發表在 痞客邦 留言(0) 人氣()