Takeaway

• 不應同時為true的state不要同時宣告
• 比起用嵌套一層包一層，讓每個節點「扁平化」，定義各自的子節點會更好
• 用到Props時要把State直接拿掉，否則會無法更新
• 要列出「所選擇元素」的State時，不要直接select原元素，要select原元素的ID才不會導致重複！
• includes()需要線性時間，萬一資料量大性能會差。可使用Set的has()取代
• 要先useState( new Set() );
• 要看Set的長度是用size而不是length
• 要用new Set複製一份State出去再做增刪，不然會mutation
• 狀態提升：希望兩個組件的狀態保持連動，如一開一合。所以把State擺去父組件，再用Props傳State下來
• 狀態提升三步驟：移除子組件的State → 寫好父組件的內容 → 設定父組件裡的子組件的狀態
• 狀態提升的缺點：資料傳遞路徑又要改。替代方案如Redux
• 可控組件：讓Props或State成為單一資訊來源；不可控組件：經由DOM
• 單一資訊來源（SSOT）：每個狀態都有唯一的資料來源
• React Hook Form和Formik：幫助製作React表單的套件。核心是不可控組件，解決可控一直重渲染的效率問題。但兩者都仍能做到可控。