Hooks
React
useState
useEffect
useContext
useReducer
useMemo
useCallback
useState
回傳一個 Array
state
為要設置的 state (命名隨意)setState
為更新 state 的函式 (命名隨意)initState
為初始 state,也可以是一個 return function
useState Hook
可以用不止一次先來亢亢這個
React 文檔是說
为什么我会在我的函数中看到陈旧的 props 和 state ? 组件内部的任何函数,包括事件处理函数和 effect,都是从它被创建的那次渲染中被「看到」的 (說明 console 印出來的是這次 render 出來的值)
但如果中間在加入一個 return function 呢?
建議是不要使用以上方式這樣做判斷
而是使用
useEffect
偵測updateCount
的變化並且執行要的動作
任何會產生 side effect (資料獲取、訂閱、手動修改 React Dom 等) 的行為都應該使用 useEffect 處理。
整合了 componentDidMount
, componentDidUpdate
, componentWillUnmount
callback
函式,用於處理 side effect 邏輯array
根據不同的設定來決定要執行 callback 的時機componentWillUnmount
[]
,只在元件第一次 render 時執行,相當於 componentDidMount
componentDidUpdate
有兩種常見的副作用,一種是不需要清理的另一種是需要的。
是 Context.Consumer 的語法糖
解決層層傳遞 props 的問題 ( props drilling ),主要通過 3 個步驟:
React.createContext
創建 Context Object。Context.Provider
包裹父元件,傳遞資源使底下 child 可以取用。Context.Consumer
包裹子元件,取得 context 資源。使用 useContext
代替 Consumer 取得 context 資源
每當 useContext 更新時,底下的 child 元件都會重新 re-render,所以不常變動的值較適合使用 context 保管,或是使用 useMemo 節省效能。
進階版 useState,兩者都是用來儲存、更新資料。跟 Redux 很像!核心都是 store, action, reducer
reducer
是一個函式,用於處理 action 並更新 state。initState
初始化 State。initFn
初始化 Function,useReducer 初次執行時被處理。state
狀態 snapshotdispatch
更新 state 的方法,action 作為參數。用於效能優化。無關於父元件,主要用在當元件重新渲染時,通過記憶值
避免在元件中複雜的程式重複執行,可以減少渲染的耗時。
適合用於 > 需要複雜計算的場景,例如 複雜的列表渲染
,深拷貝等等。
React 官方特別提醒 You may rely on useMemo as a performance optimization, not as a semantic guarantee. 因此,不要什麼東西都丟到 useMemo 裡面,在需要優化效能時才引用,否則只是讓 React 處理更多事情,造成更大的負擔。
callback
計算邏輯函示。array
當裡面賦予的值改變時 useMemo 才會執行。當父元件傳遞的 props 是 Object 時,父元件的狀態被改變觸發重新渲染,Object 的記憶體位址也會被重新分配,React.memo 會用 shallowly compare 比較 props 中 Object 的記憶體位址,這個比較方式會讓子元件被重新渲染。
因此,React 提供了 React.useCallback 這個方法讓 React 在元件重新渲染時,如果 dependencies array 中的值在沒有被修改的情況下,它會幫我們記住 Object,防止 Object 被重新分配記憶體位址。
當 useCallback 能夠記住 Object 的記憶體位址,就可以避免父元件重新渲染後,Object 被重新分配記憶體位址,造成 React.memo 的 shallowly compare 發現傳遞的 Object 記憶體位址不同。
callback
計算邏輯函示。array
當裡面賦予的值改變時 useMemo 才會執行。useCallback(fn, arr)
等於 useMemo(()=>fun, arr)