1. 為什麼我們需要 React?可以不用嗎?
a. 為什麼我們需要 React?
React 發明的原因是為了更快速建立畫面,核心的設計思想是:
a.1 利用 hooks 宣告資料與畫面之間的關係,當資料產生變化時,React 會去計算怎麼幫你最省力地執行(react),這也是 React 名稱的由來。這個方法會讓程式碼比較好維護。
a.2 把介面元件化,產生共用性、擴展性以及組合性
a.3 元件與元件之間,透過 props 來溝通
a.4 比對 Virtual DOM 跟真實的 DOM 的差異來決定是否更新,以達到效能最佳化
參考資料:
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 身上,每一個變更都是一個新的狀態
這裡想要說個題外話,「直接給一個新的」這個感覺蠻北美的,加拿大的雨傘、襪子還有背包居然是終身保固(某些品牌啦,不全都這樣)就算了,一但壞掉就免費直接給你一個新的。
我買了一把傘第二次用被吹歪了(骨架斷掉,有可能會刺破傘布那種狀態),隔三天就寄給我一把新的;我朋友的背包更扯,他用了快要十年,官網說:「只要是自然磨損,可以憑發票到店辦理全額退費並換一個新的」,本來只是想試試看是不是真的,結果還真的拿到退費,也拿到一個新的背包。(不過我朋友能保存紙本發票這麼久也是很強...)
這跟我在台灣從小習得的價值觀很不一樣,因為惜物還有念舊的關係,東西壞了修修補補,我都覺得很正常,但來到這裡以後很吃驚這裡的價值觀,一開始蠻不習慣的。
3. state 跟 props 的差別在哪裡?
state 是 component 儲存資料的原始狀態
props 是從外部對 component 資料的改變,通常用由父層傳遞資料給子層
這個題目讓我意識到,我是先學會怎麼用 React 做 todo list 才理解裡面的東西是什麼...
參考資料: