React 洗菜 — 重整你的component
這系列的文章是個人開發經驗與結合前端 design pattern 的概念的經驗分享，這系列文章不是給完全沒基礎的新手，所以你如果 hook 還不會用的請參考我之前的文章，那麼我們就開始今天的主題吧！
今天要講的是很常見也很入門就會遇到的問題，想像一下，當你的功能越變越大的時候，你會很頻繁地和後端的 server 透過 rest api 溝通索取需要陳列的資料，所以當你要處理的 api 增加之後，你所需要陳列的畫面也就會變得很複雜，那麼常見新手犯的錯誤就是你的 component 太肥大了，下面我用一個常見的新手範例來做示範：
不論是哪種理由，盡量避免不必要的套件鑲嵌，也就是在 component 裏面 return 之前，令列其他子組件，而且沒有處理 props 的問題直接渲染，這樣不但會造成維護上的困擾，也會產生組件渲染上重複渲染的問題。
所以，以上述為例原本的 BtnGroup 應該拆到 Foo 組件之外，透過 props 的機制，傳入對應的 data，如下：
有了這樣的概念之後，在後續開發設計架構上，就可以將 component 大致上分為兩類：
- 負責交換資料並往下傳遞的組件 (component) 對應— Container Pattern。
- 負責接收資料並渲染的組件 (component) 對應— Presentational Pattern。
這樣一來當你的專案出現 bug 的時候，你就能很快地去找到相對問題的組件(component) 進行修正，在初期架構階段也較能有效管理對應功能組件。
這樣的概念就是對應上 Design Pattern 的 Container/Presentational Pattern有興趣的話可以參考這個連結。
那麼我們試看看做得更徹底一點，將原本的列表封裝成組件吧！
只要掌握以上原則，你就會慢慢瞭解到什麼樣的時機應該要整理你的組件(component)，總之，Code Review 的時候就可以順著這個概念去優化。
希望這次的分享能讓你更脫離 junior 一步，恭喜你又提升了一個檔次，期待下次的分享，我會努力更新的。
