很久沒發文了感覺很廢，所以舉一個最近工作學到的東西，公司採用的框架是 React、Nest、
Typescript、Styled，所以階段性任務都在學怎麼切 React Component，跟尋寶(找有沒有前人建好
的 Component可以套或事先包好的常數)，還有整個開發流程，組織算蠻扁平的，發現測試環境
掛了可以直接去問後端，同事也蠻友善。
任務大概是做一顆有三種狀態的按鈕，onClick 一個方法大家都會，Vue 跟 React 有個不同的
地方是渲染方式，Vue 只要在 data 先 set 好，數據雙向綁定跟畫面渲染通常沒太大問題，
但 React 數據是向下傳遞，一開始我還想要作兩個組件然後平行組件傳，在 React 依然是件困難
的事，並且公司的東西也不能因為一個小組件就讓你隨便傳值到 store 借放，後來作成一個組件
將按鈕控制的畫面跟按鈕放在一起，大不了把按鈕用絕對定位定到天涯海角，因此還要將畫面
的狀態設置成一個 hook ，React 才會監控並在數據變更的時候重新渲染，一開始我會 if 連發：
let status = 0
if( status === 0 ){
狀態0
status = 1 //切換到下一個狀態
} else if (status === 1){
狀態1
status = 2 //切換到下一個狀態
} else {
狀態2
status = 0
}
後來運用 switch：
switch(status){
case '0':
狀態0,
break
case '1':
狀態1,
break
case '2':
狀態2,
break
}
至此剩下一個問題是，case 0、1、2 過幾個月別人會看不懂，雖然本人通常會記得是怎麼
回事，所以這時候就要用 Eunm 把 case 變成英文：
eunm name {
OPEN:'OPEN'
'0.5X':'0.5X'
CLOSE:'CLOSE'
}
const [mode, setMode] = useState('OPEN')
React 的 useState，可以用 setMode 改變 mode 的值並重新渲染影響範圍。
change( ) => {
const nameArray = [name[OPEN], name[0.5X], name[CLOSE]]
const modeLength = nameArray.indexOf(mode)
( modeLength + 1 ) > nameArray.length ?
setMode( nameArray[0] ) :
setMode(nameArray[modeLength + 1])
}
首先先做一個 enum 內容的陣列，然後找出現在狀態是第幾種，之後作一個沒事 length + 1 跳到
下一個狀態，到底則回到第一種( length = 0 )狀態的判斷。
雖然實際上的程式會變比較多行比較繞，但是在這裡可讀性的要求在節省行數之前。
參考資料：
