Hooks
Hooks
以use開頭的函式
處理狀態
處理作用
同步React外的資源
宣言式UI只能處理一部分的DOM
其根DOM元素與其子孫元素的屬性、文字
Web應用觸及的範圍則更廣
React之外的DOM、瀏覽器提供的功能、瀏覽器外的機制
元件的主要目的是算繪DOM元素
處理其他的資源則稱為「副作用」
本身不應擁有副作用
需能夠重複執行也不會造成問題
在React之外的資源也依照宣言式UI的模式處理
讓資源和React的算繪同步
處理記憶化
記憶化
render phase
執行元件、建構虛擬DOM
commit phase
將虛擬DOM反應到DOM上
進行差異更新
狀態改變時，元件會重新算繪
子元件也會重新算繪
使得整個元件樹都會重新算繪
非受控元件
Memoized = React.memo(Component, compare)
回傳記憶化的元件
用於不需要重新算繪子元件的時候
cached = useMemo(calculate, deps)
回傳快取值
cached = useCallback(fn, deps)
回傳快取函式
函式元件必須以相同順序呼叫相同數量的Hooks