Takeaway

• State：隨時間而變化，不能藉由現有資料計算出來
• 決定State放在哪：找到用State的組件們，再找它們的共同父組件
• 更改區域變數不會觸發渲染
• State變數：用來保留資料。如index
• State setter函數：更新State變數並觸發渲染。如setIndex
• 觸發組件渲染的兩種原因：初次渲染、狀態改變
• 初次渲染其實是：調用createRoot→render組件→在DOM上appendChild。簡寫為觸發 → 渲染 → 提交
• appendChild只能接收一個參數；append可以接收多個，還能接收字串
• prepend：把節點插到前面的append
• 常見const [index, setIndex] = useState(0)搭配setIndex(index + 1)
• Vue的ref類似useState，而非useRef。後者可以保存不用重渲染的資料。
• Vue的onClick會簡寫成@click，全名是v-on:click
• Hook只能在組件或自訂Hook的最頂端調用
• Hook擺錯位置會被eslint-plugin-react-hooks抓包，顯示錯誤「渲染的Hook比預期還要少」
• State具獨立及私有性。渲染同組件時兩次時，可以有不同狀態
• 兩個State想同步？從子組件移到父組件中
• 如果組件要重渲染才會需要State，不然事件處理函數有時就夠了
• useState也要記得import
• Closure：閉包。內部函式可以從外部函式取得變數，也就是事件處理函數及JSX，可以取得外部函式變數和State的原因。
• 閉包適合緩存，但缺點是外部宣告的變數如果沒用到，會造成記憶體洩漏