Hook在不需要改變Component階層就能重用stateful(有狀態)邏輯

解決變得複雜的component(很難理解)

• 只在最上層呼叫Hook，不能在迴圈, 判斷式....等呼叫
• react hook仰賴呼叫的順序，不能用 if () 判斷hook是否執行，應該寫在hook裡面判斷否則會出錯

StateHook

不必寫class state就能使用其功能

每個component有自己的memory cell(記憶體細胞)，呼叫的時候會取的自己獨立的local state

useState ⇒ setState

useState中的state只會在第一次Mount時被賦予,props異動時不會跟著被render,需要更新state裡的狀態可以特過useEffect監聽props異動後做setState更新, useState特性有點類似class components 中 constructor裡的state。

setState不要對原先陣列做操作(splice, push)，map, filter可以在就有陣列回傳新的陣列,對資料操作完後再進行setState不會引響到原先的state

• setState屬於非同步行為 ⇒ 在同個時間大量使用setState可能導致功能失效，應該將資料都處理好再一起setState

👎

const [arr, setArr] = useState([1, 2, 3, 4, 5])

arr.splice(0, 1)
setState(arr)

重複使用setState錯誤 ⇒ 先對items做完map及sort後再setState

👍

const [arr, setArr] = useState([1, 2, 3, 4, 5])

const newArr = [...arr];
setState(newArr.filter((item ,index) => {
	return index !== 0
}))

// or

const newArr = [...arr];
newArr.filter((item ,index) => index !== 0)
setState(newArr)