React 入門 & 使用Typescript開發(Lion教育訓練回顧)
2020-0306 Lion教育訓練，之前寫到一半，遲遲沒有publish，因為上半年專案與需求一個接一個。現在剛好正是時候重新整理與大家分享。
前言
2020 LionF2E 開始一系列的教育訓練課程，本課程為React入門及使用Typescript開發。由於短短兩個小時的時間非常有限，因此只能把課程濃縮再濃縮，課程步調相對比較快，建議有寫過基本React的人會比較好吸收。同時也會把一些使用react上遇到的問題與地雷與大家解說。前面基本的部分我會輕描淡寫帶過，主要著重在react Class Component的生命週期與常見地雷。
專案與環境設置
- 專案下載路徑: https://github.com/cwchang93/react-ts
- 啟動專案: npm run storybook / yarn storybook
- 投影片網址: https://reurl.cc/E78W8a
執行以上步驟前，必須先下載NodeJS
課程學習目標
1.了解React的精神是什麼？
2.為何要使用TypeScript開發?
3.React中如何使用TypeScript?
4.React生命週期做什麼用?
5.如何處理深層資料流?
課程大綱
1.React 小試身手 — React三種組件：Class, Functional, Pure
2.Typescript 語法
3. React 應用 & 常見地雷
- React 生命週期
- React NestedState
- Context應用
1. React 小試身手
這個HelloThere主要是讓完全沒有基礎的人，了解React基本的參數傳遞方式主要有props跟state。
Props
由父層傳下來的變數，因此在子層要接變數時會利用props.(props的值)
State
控制狀態的方式，利用setState(class component), useState(functional component),去改變狀態。當改變狀態畫面都會重新render
2. TypeScript語法
TypeScript語法大家可以參考這次教育訓練投影片(P19-P43)以及Lion-F2E的你必須懂的TypeScript & TypeScript’s Basic。這邊呢我們就不再贅述了。
3. React應用與常見地雷
3–1. React 生命週期
一開始學習React時，其實不曉得生命週期是做什麼用的，其實簡單來說，生命週期就是『從出現到消失，並且在特定時間做特定事情的概念』
比喻成人從一出生開始=> 3歲看可愛巧虎島 => 8歲國民義務教育=> 畢業 => 找工作=> 結婚生子=> … => … =>化成灰
React的生命週期概念也是一樣，元件從被創造之後到消失的過程。
生命週期流程這部分一開始會比較難理解，主要記得一個component一開始生成以及要改變時需要哪些流程即可。
組建兩種更新方式：setState, forceUpdate
子組建會隨父組建更新而更新：父層更新=>會重新render() =>子組建也會跟著被渲染（子組建也包在render()函式裡面）
3–2. 常見地雷區- PropsAsState
到這邊大家可能會問：『props當State有什麼不可以？』，表面上看起來是正常的，而且大多數情況下都是正常的，如果你的State的後續變動不需要靠props的話。
這種狀況地雷常會發生在原本需求不需要靠props來改變state的狀況，前人寫得很開心，但後來需求改成需要props變動來改變state，這時候後人就改得非常辛苦，也不知道問題出在哪裡，只知道state不會更新。
這個時候最快的解決方式就是用componentDidUpdate去監聽props改變時，對我的state做操作。
3–3. 巢狀State該如何維護？
看完這張圖，讓我馬上想起剛進公司學React時，發現前人的code怎麼那麼難維護？一開始覺得是自己經驗尚淺，但過了一年後，發現其實是寫法的問題。有些人習慣把同一類型的state值堆在一起，但卻沒有考慮到在setState時，會有物件深淺拷貝的問題，也不知不覺把bug埋在其中…
這邊詳細可以看我們NextedParent的範例
講到這邊，或許你已經也些解決這種惱人bug的方法了。這邊大致上提供幾個方式：
3–3 SOL 1. 土炮法：
把每個state都寫上去，每一個state都寫上去，在覆蓋時就不會衝突了。
3–3 SOL 2. 洋蔥式寫法(用prevState 一層一層剝開state)
看完前面兩種寫法後，你會訝異，那麼我今天有20個state，那該怎麼辦？像是下面有非常多的input框，年月日可能又有細分其他深層state。那這樣一來我們同樣要用剛剛的方式寫到手軟嗎？
3–3 SOL3. 用OBJ拷貝State
使用Object.assign({}, this.state.result)來解決，然而，到這邊，學過Object的你一定會想說一定能夠拷貝成功嗎？這邊又牽扯到了淺拷貝與深拷貝的問題。這邊大家有興趣可以點連結進一步了解深淺拷貝的問題，我覺得寫得還不錯。
到這邊，如果你還搞不懂淺拷貝跟深拷貝的話，那就直接用lodash深拷貝(_.cloneDeep)，即可解決大部分的問題。大家可以到lodash的官網去查看。
4. Context 處理資料流
上面介紹完如何避免地雷及如何維護醜code，但資料流一直以來都是前端開發時一個潛藏的痛點。雖然沒有馬上的致命性，但當專案愈來愈到勢必是個大問題。
以React來說，不同於Vue跟Angular雙向綁定，React採單向資料流，因此若要處理大型專案，會建議加入Redux來開發，把state整合成雲端state庫，每個component都可以去存取。
然而，如果只是小型專案，建議是用Context API。
何謂Context?
基本上就是跨組建溝通的React API，如果使用functional component開發，內建React有更方便的useReducer, useContext等API。大家有興趣可以到官網研究一下，這邊主要跟大家分享概念。
上面大家有印象嗎？在大型專案裡面，我們如果傳遞資料如果是一層一層傳遞，就會各種錯綜複雜。當今天要debug也無從下手。
大家小時候應該也玩過一種傳遞訊息的遊戲，第一個人把一段話往下傳，船到最後一個人再看看結果一不一樣。你會發現，如果只是一個詞或一句話，那正確率很高。然而，如果今天是3句話以上，甚至是比較多的字詞，船到後來都完全不一樣了。
這和我們在開發react傳遞props, state的狀況是不是很類似呢？
因此，當我們透過Context API，就能夠解決這個問題。
你也可以把Context想像成是翻譯機，如同家裡在溝通時，老一輩的人就只聽得懂客家話跟台語，此時每當有不會講台語的朋友來家裡時，老一輩的人就只能透過我當個翻譯，沒辦法直接溝通，而我中間有些誤解時，翻譯自然而然也會錯誤。
以上就是今天的分享，也很感恩有這次機會能上台面對80幾位公司同事們和大家教育訓練，一同教學相長。
雖然準備教材過程中花了很多時間，但後續其實得到最多的是自己，透過分享透過演講，不僅僅再次複習技術內容，更重要的是能夠把自己所學的表達出來，讓大家能夠一起進步，期待後續大家都能夠持續邁進💪
最後，還是要推坑一下，那就是分享我自己滿喜歡的一部影集。叫矽谷(Silicon Valley)。我從這部影集中學到很多軟體開發及創業中會面臨到的問題，也不難想像為何現在有那麼多的新創公司。因為網路的發達，大家有想法，有想做的東西，透過寫程式，成本不高，只有能創造有價值的產品，人人有idea就都能懷抱夢想並付諸實踐。
