為什麼需要 React / 思考模式的差異 / state vs props

1. 為什麼我們需要 React？可以不用嗎？

a. 為什麼我們需要 React？

React 發明的原因是為了更快速建立畫面，核心的設計思想是：

a.1 利用 hooks 宣告資料與畫面之間的關係，當資料產生變化時，React 會去計算怎麼幫你最省力地執行（react），這也是 React 名稱的由來。這個方法會讓程式碼比較好維護。

a.2 把介面元件化，產生共用性、擴展性以及組合性

a.3 元件與元件之間，透過 props 來溝通

a.4 比對 Virtual DOM 跟真實的 DOM 的差異來決定是否更新，以達到效能最佳化

參考資料：

Why did we build React?

React 教學 - React JavaScript UI Library

不過寫到這裡，我產生了一個問題就是，怎麼判斷這個專案要不要用啊？

b. 可以不用嗎？

雖然很想寫一些廢文例如~~可以啊，前面那些作業沒用也是交了啊~~，或是~~不一定，如果老闆叫你用的話，閉著眼睛也是要用~~這一類的鬼話，我覺得討論用或不用，覺得可以從「什麼時候要用」下手。

使用前端框架的原因，在於「比較方便」、「開發比較快」、「重用性高」等等，這個影片跟文章給我一些啟發 Why & When I Use React JS、When Does a Project Need React?，以下列出我認為何時要用以及原因：

b.1 什麼時候要用 React?

b.1.1 有很多資料，js 寫到最後很大越來越亂的時候

b.1.2 與使用者的互動性高

b.2 舉些例子：

b.2.1 做一個簡單的 todo list 需要 React 嗎？不需要，因為 js 夠快，操作一些可預期性的動作（新增、修改、刪除）很像是開車去家裡樓下小七買東西，用走的比開車快。

b.2.2 做一個大家都可以用的 todo list 需要 React 嗎？有可能喔，假設一百萬個人來註冊，資料就多到爆炸了，這時候就可以用了。

b.2.3 做一個部落格，單純放文字或圖片，這樣需要 React 嗎？不用，因為沒有什麼跟使用者互動的機會。但如果是 SPA 那種，可以用。

b.2.4 做一個類似臉書、IG 的仿社交媒體 app，需要 React 嗎？需要喔，就算是剛開始只有五個朋友來用，光是這裡按讚、那裡分享、滑下去影片自動播放或者點擊跳轉頁面的功能，這些 UI 就夠複雜了。

2. React 的思考模式跟以前的思考模式有什麼不一樣？

a. 畫面跟功能，一起或分開？

之前以為畫面跟功能分開才是好的作法，但用 React 是每一小塊組件都可以自行運作，而且裡面還把 HTML、CSS、JavaScript 混在一起寫，世界觀一直被刷新。

感覺很像本來以為每個人都是產線工人，只專注在一個動作上面，忽然間大家都變成斜槓青年；在純 CSS 裡面寫 inline style 不太好，但是 functional CSS 又另當別論，隨著每週學了一個新的東西，我就好像被澆了一大桶冷水在頭上，「什麼！居然有這種東西，怎麼這麼好用」

如果要說有什麼不一樣的模式，以前好像花木蘭吧，東市買駿馬，西市買鞍韉：市場上只有專賣店

現在的模式很像是：什麼都賣，什麼都不奇怪，複合式一站服務

b. 換句話說，使用的手段很不一樣

刪除用 filter 很特別，以前會直覺地想，「把不要的刪掉」，現在則是「把要的留下來」

這就跟某個時期以前看老師的影片，錯誤處理放在後面，但近期的風格都是「先處理錯誤，再做剩下的事」

c. React 重點在於關注 state

所有的重點都圍繞在 state 身上，每一個變更都是一個新的狀態

這裡想要說個題外話，「直接給一個新的」這個感覺蠻北美的，加拿大的雨傘、襪子還有背包居然是終身保固（某些品牌啦，不全都這樣）就算了，一但壞掉就免費直接給你一個新的。

我買了一把傘第二次用被吹歪了（骨架斷掉，有可能會刺破傘布那種狀態），隔三天就寄給我一把新的；我朋友的背包更扯，他用了快要十年，官網說：「只要是自然磨損，可以憑發票到店辦理全額退費並換一個新的」，本來只是想試試看是不是真的，結果還真的拿到退費，也拿到一個新的背包。（不過我朋友能保存紙本發票這麼久也是很強...）

這跟我在台灣從小習得的價值觀很不一樣，因為惜物還有念舊的關係，東西壞了修修補補，我都覺得很正常，但來到這裡以後很吃驚這裡的價值觀，一開始蠻不習慣的。