距離上一篇前端小菜鳥成長計畫文章，又過了一個多月。
上一篇成長計畫大概是在3月16號左右撰寫，在這期間我3月底去了日本旅行，回國後就立刻進入新的公司工作，很幸運的是這次無痛轉前端，很像是公司內轉前端的契機，沒有面試只有履歷就直接進(雖然也不知道是不是一件好事啦)。
很快的4月初我就立刻參與了第二季PI，開始拿到 Jira Ticket，然後面對的公司專案們，都是陳年老code，越陳越香的那種，好可怕XDD。
既然基本功什麼的都還沒打好，只看自己實作幾個前端專案練習就進了公司，當然遇到公司使用的任何技術，為求趕緊熟悉專案能趕緊貢獻，學習優先度當然直接拉到第一，那麼就直接進實戰看看專案中，我學到哪些新技術吧！
邊扒公司code 邊學上古時代的技術 (其實也沒多久啦XD)
React.js Class Component Lifecycle Methods
React.js 是我2023年初為了開發我的占卜網頁服務 Miri 所學習的前端框架，為的就是在未來還可以運用React Native 實現App版，最一開始我使用的版本是 React.js v18版，所以我是直接寫 Functional Component。
我以前是寫Python的，絕大部分接觸到的專案跟程式都是寫函式(Function)居多，很少使用物件導向寫法，當然也有可能我歷經過的專案不夠難(?)。
所以，當我接觸到Functional Component時，簡直鬆了一大口氣，因為在Python沒有太多物件導向的撰寫經驗，自然看到React.js 的 Class Component 也會很頭疼不知道該怎麼辦。
然後我還是遇到了呵呵
雖然一進公司就被扔了6個專案，想說至少在開始貢獻之前，能為自己爭取多些時間先爬專案code，但是在正式的第二季PI開始後，卻是做第7個專案，而且還是沒什麼環境設置的文件，接待我們的Chief工程師也很忙不太理解，只能夠丟前一個開發團隊的聯絡方式給我們，真是驚喜真是意外。
不料打開來看竟然是我最擔心的Class Component + 上 Redux 架構，一個js檔就有個千行，所有props 都擠在一起，全部一起傳。
在sprint一開始看著這茫然又巨大又老的Code，第一步就是先了解每個 Lifecycle Methods 在做什麼，而且因為之前的經驗都是使用 Functional 的 Hooks，所以我索性直接兩者比對，看一下在各個Hook實作的功能，在之前的Lifecycle Methods個別對應功能是什麼。
React Component Lifecycle Methods – Explained with Examples，下面我只會列出幾個我在專案中遇到的，其他可以參考這個網站。
我大致上整理了一些常用的 Lifecycle Methods，並將他們跟 Functional的Hook比較。
| Lifecycle Methods | 功能 | 相似的Hook功能 |
|---|---|---|
| componentWillMount | - 在 渲染 (render) DOM 前執行 | useEffect |
| - 只執行一次 | ||
| componentDidUpdate | - 根據 props 更動改變 | useEffect |
| - 與useEffect 相似 | ||
| - 這邊需要注意造成無限循環(infine loop), 因為只要偵測到 props 有更動，就會call一次method，重新執行。 | ||
| componentDidMount | - DOM 形成後執行 | useEffect |
| - 包括call API | ||
| - 只執行一次 | ||
| componentWillReceiveProps | 從React 17版本開始被棄用，以componentDidUpdate來處理props變化。(公司的陳年老code還不夠老，這個method我沒辦法做什麼評論) | - |
| render() | 就是產生虛擬的DOM並渲染在頁面上 | 在新版React直接使用return |
咦等等，對應的Hook怎麼都是useEffect? XD，原來現在的useEffect在早期拆分成這麼多個methods使用，其他的我目前爬公司的code不多，也許還有其他lifecycle methods還沒看到，有看到我再補充上來。
撰寫程式時，注意 componentWillMount 跟 componentDidMount 分別是渲然DOM前執行跟後執行，而且都只渲染一次，所以不必擔心無限循環。
可是呢，需要注意使用的是 componentDidUpdate，因為我到現在動公司專案的code，還是造成好幾次無限循環，希望沒有因此把API call爆XD，應該是沒有啦，但是我還不是很懂這一個method裡的內容要怎麼更改才不會循環call，還在研究。
至於新版React.js的Hook useState，我在Class Component看到是使用Redux – 一個狀態管理的JavaScript函式庫管理各個狀態跟更新狀態的函式，這個部分我們放到下篇文章講解。
真的要感謝新版的React.js，在學習跟貢獻公司陳年老code的class component + Redux架構時，深感現在新版的React.js真的是超級超級方便許多，Redux在新版本React.js可以用號稱輕量的狀態管理 useState Hook 解決，那傳來傳去龐大的props也能在新版用useContext解決。
雖然公司的專案React.js版本夠新，也可以Class + Functional Component 一起寫，但是這個難題是我們必須保持舊的程式碼上production還能運行，同時新增額外的新功能，所以勢必還是得學習看舊的技術，然後去更改及維護舊的技術。
不過，總是埋著頭自己學習前端技術也不是件好事，來公司貢獻賺取實戰經驗，不僅學習快，也能了解除了自己接觸的技術以外，還有其他哪些技術。
只能說多學習囉。
