Takeaway

• 渲染時傳回的JSX被形容為是Snapshot快照，會固定State的值
• React會等事件處理函數運作完才更新State，這被稱作Batching批處理
• 寫三個setNumber(number + 1)，輸出的還是以1為遞增
• 寫三個setNumber(n => n + 1)，輸出的才會是以3為遞增
• n => n + 1：被稱為Updater function更新函數
• 更新函數跟組件一樣應該要是純函數，都會調用兩次做測試
• 更新函數在寫非同步時容易用到
• 幫更新函數命名：使用setter的駝峰。如setPageIndex(pi => pi * 2);
• 在替換State後更新State，兩段程式碼都能正常運行；在更新State後替換State，只保留在後的替換結果
• useState裡的內容應被視為不可變，請搭配setter觸發渲染
• State要替換的值不只一個時，setter裡可以放物件，有時會用到展開語法
• 展開語法的本質其實是淺拷貝，和Object.assign一致
• 淺拷貝：原型鏈相同，不像深拷貝只複製結構。白話來說，淺拷貝的物件和原物件不同，但指向的內容物相同，即Call by reference傳址
• 深拷貝實作則要用到JSON方法、2022年推出的structuredClone()或lodash的cloneDeep
• 改三欄input的值時，如果用[e.target.name]: e.target.value，就可以只寫一個事件處理函數，而不用分成email: e.target.value等