用React框架重構PHP網頁心得

在啃食完 React 官方文件後，決定來挑戰把原來用 PHP 混寫 HTML 的投稿系統專案做前後端分離，並用 React 框架的邏輯實作出來。

開竅點1: React的元件的哲學

如何切割頁面？一開始只是把 HTML 改成 Functional Component 用 JSX 寫，覺得沒有抓到 React 的元件精神，跟沒重構差不多。後來開始思考如何拆出可重複利用的元件，讓又臭又長的程式碼更一目了然，發現我必須跳脫以往以頁面為檔案單位的思維，改成以元件為檔案單位的 React 思維，就算暫時不會再用第二次的區塊，只要是自成一區，就也先把它模組化獨立成元件，檔案頓時簡潔好讀許多。

但我發覺表單內容還是有好多相似卻不完全相同的欄位結構，於是又獨立拉出一個檔案用 map 動態產生它們。過程中思考著怎麼設計資料結構可以方便後人的欄位擴增需求，本來又獨立出一些元件，後來發現我有點拆解上癮了，其實沒必要那麼多層，要去感受程式碼「精簡」跟「易讀、好維護」的甜蜜點，所以重新修改了資料結構，發現可以精簡一層，用兩個 map 搭配 if else 解決這些相似卻又不完全相同的欄位結構渲染。重構完這部分，馬上感受到重構對修改欄位樣式的好處，原本要修改十幾次重複的地方，現在只要修改一個地方，且表單內容程式碼總長度直接短70%!

開竅點2: React的資料流與條件式畫面渲染邏輯

狀態管理 State 和欄位資料要存放在哪裡？子元件要如何更新父元件資料？肢解了網頁後，自然而然就產生了如何在元件與元件之間溝通的新煩惱，但這也是 React 的精神有空間發揮的徵兆。我開始觀摩其他 React 專案，發現資料和頁面 layout 分離的 Design Pattern，於是把投稿表單欄位跟儲存欄位輸入資料分開成父子層關聯的兩個元件，將父層作為資料中心，子層則可以專心聚焦在表單內容的排版，再運用從父層傳下來的 setState，跟父層溝通資料更新。

由於我希望在表單送出前，有個 Modal 跳出來確認是否確定要送出才送出，所以又要再把 prop 往下傳一層到 Modal 元件裡，有點輕微 prop-drilling，未來若有時間可以用 useContext 改寫。

而另一個問題是，我希望在送出成功的頁面上能顯示該次投稿流水號，卻又不想打一次 API 跟資料庫要（一方面是前後端分離還沒接資料庫），發現只要將成功頁面結構設計在資料中心底下，就可直接跟父層要到資料顯示在頁面上，於是也趁機實作了條件式畫面渲染邏輯：當 state 是“送出前”時，渲染表單內容；當 state 是“已送出”時，渲染成功畫面。過程中畫了資料流和頁面結構後，也同樣經歷了拆得過細，到精簡一層的修正過程。