[React] 狀態管理控制UI-實作練習回顧
在進入到AC 前端第三周"React 狀態管理章節"後，有一種又要跋山涉水跨過稜線的感覺，除了觀念要建立外，慢慢進入到統整綜合應用。比起一般單純點擊加減的按鈕元件，它們的狀態就是數字控管而已。
這次React用input表單來說明多個狀態的管理控制 (元件裡面會宣告很多個useState)。這種感覺很像AC 2–2 翻牌遊戲的MVC架構，元件有自己的controller自己控制自己該呈現什麼UI，有些useState是拿來存放使用者輸入的資料(model)，有些useState是拿來控制流程的，自我學習時要分析元件到底要定義那些關鍵state。
React 元件設計狀態要點整理
官方文件重視一個元件的狀態搭建完畢後，可以思考哪些狀態有重複情形且盡可能移除它(Remove any non-essential state variables)。
- 有違常理的設計模式(paradox)-像是表單中提交狀態和使用者輸入階段不應該同時存在，可以宣告在同一個useState變數裡面。
- 同樣的動作管控有沒有可能合併到同一狀態，用官方舉到的例子是:
為了知道元件流程有沒有進編輯狀態(或者說使用者正在打字)，這件事情在狀態上管控，我們可以將answer狀態資料抽取出來，去做answer.length !==0，看起來跟isEmpty要做的事情很雷同。
const [answer,setAnswer] = useState(‘ ’)const [isEmpty,setIsEmpty] = useState(true)
3. 第三個是實作滿常忽略，因為用到反向思考概念，就是一個狀態其實可以用反向運算子(ex: !empty)，有時候可以發揮定義一個狀態，可以達到兩種條件控制，不一定要把寫在set function裡面的新變數寫死。
React 官方作業-Profile editer實作歷程
- 首先先把需要的流程狀態(controller)和資料(data)，各自需要哪些useState來宣告，應該會有兩個資料(first name,last name)和一個編輯狀態(edittig process)。
//設定資料儲存用狀態 modelconst [firstName, setFirstName] = useState(‘Jane’)const [lastName, setLastName] = useState(‘Jacobs’)//管理流程狀態 controllerconst [isEditing,setIsEditing]= useState(false)
2. 在一開始初次渲染時，還沒進入編輯狀態前輸入表格是不能出現，官方提示說可以用條件渲染來決定顯示表單或只顯示名字，這邊很有趣可以用三元運算子來調控。
前面的條件是true的話，會執行冒號前面的JSX渲染到畫面上，因為一開始isEditing我們狀態設定是false，所以只會顯示名字🤔😝🤪，好調皮的寫法。
<b> {!isEditing? firstName : <input value={firstName}
onChange={saveChangeFirstName} />} </b>3. 因為接下來需要改變元件狀態，React有提到人為(human操作的)，大多是用事件綁定event handler，這樣的side effect funciton來觸發變化。
提交按鈕同樣運用狀態來決定他要呈現的是Edit或是Save，因為提交後表單會有預設動作，我們需要針對form表單另外掛個事件綁定event handler
<form onSubmit={handleSubmit}><button type=”submit”>{!isEditing?’Edit Profile’:’Save’}</button>
</form>
4. 最後設定進入編輯後各個事件handler
//表單送出時的動作function handleSubmit(e) {e.preventDefault()setIsEditing(!isEditing) //編輯狀態改變 可以直接用反向運算子，類似toggle概念}
//儲存firtName用function saveChangeFirstName (event) {setFirstName(event.target.value) //觸發重新渲染畫面}
//儲存lasttName用function saveChangeLastName (event) {setLastName(event.target.value) //觸發重新渲染畫面}
一開始寫不出來沒關係，因為要定義所有必要狀態和資料有時候不太容易，還要想著流程怎麼進行。
但是可以跟著官方解答觀摩，試著註解每一段落為什麼要這麼寫，而不是看看文件觀念而已，每一段程式碼其實都是基礎觀念組裝而成。
然後除了基本常用的onClick事件外，也開始出現一些onChange,onSubmit原生的事件處理，可以多了解看看，畢竟是觸發狀態改變的鑰匙之一🔑。
參考資料:
