雖然每天主要還是使用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也會是變動後的數字。
Vue3:在Vue3裡,需要另外用ref或是reactive包裝起來,才會有這樣自動響應的效果,在下面的情境,因為count有使用ref(黃框部分),所以當count有變動,畫面就會同步顯示變動後的數字。
React
如果寫React的Functional Component的話(下面的例子),需要使用useState這個hook,來定義出要使用的state。另外如果需要變更這個state時,需要用拿useState取得的setState來變動state,如同下方的setCount,無法像Vue一樣直接對count操作。如果是寫Class Component一樣也是需要拿setState下去操作要變動的state。
Props部分
Vue
在Vue裡,要把父層的狀態用prop帶入子元件時,會需要用v-bind帶入,並且在子元件裡面定義prop。
如果要從子元件操作props,則需要透過emit事件給父層,讓父層知道該執行操作data的動作。
子元件
父元件
React
在React裡,一樣要先在父層把要prop帶入的state寫上,在子元件裡面則是用參數取得props放入要使用的地方。
如果要從子元件操作props,需要將進行setState的function透過prop傳到子元件,在把這個function綁定到子元件上。
子元件
父元件
總結
最後用一個比較圖表來做個小小的總結。
這次的主題很簡單,但自己也從比較的過程中,把一些自己原本有點模糊的地方再搞懂一些。
好啦!這次的小小廢文,就到此結束啦!
那就寫些打家,打家擺掰!