Hooks
Hooks
State：组件的记忆 – React 中文文档
內建 React Hooks – React 繁體中文
React提供的API
以use開頭的函式
Reactの状態を理解して適切にHooksを利用する
2024-02-02
處理狀態
useState()
useReducer()
useContext()
useRef()
處理作用
同步React外的資源
宣言式UI只能處理一部分的DOM
其根DOM元素與其子孫元素的屬性、文字
Web應用觸及的範圍則更廣
React之外的DOM、瀏覽器提供的功能、瀏覽器外的機制
元件的主要目的是算繪DOM元素
處理其他的資源則稱為「副作用」
本身不應擁有副作用
需能夠重複執行也不會造成問題
在React之外的資源也依照宣言式UI的模式處理
讓資源和React的算繪同步
useEffect()
useLayoutEffect()
處理記憶化
記憶化
render phase
執行元件、建構虛擬DOM
commit phase
將虛擬DOM反應到DOM上
進行差異更新
狀態改變時，元件會重新算繪
子元件也會重新算繪
使得整個元件樹都會重新算繪
非受控元件
memo()
Memoized = React.memo(Component, compare)
回傳記憶化的元件
用於不需要重新算繪子元件的時候
useMemo()
cached = useMemo(calculate, deps)
回傳快取值
useCallback()
cached = useCallback(fn, deps)
回傳快取函式
可從 https://react.dev/reference/react 查看其他內建Hook
React以Linked List在虛擬DOM Fiber裡管理Hooks
函式元件必須以相同順序呼叫相同數量的Hooks
Hooks的規則
useHooks – The React Hooks Library