React Hooks系列之useCallback

前言

react hooks 是 React 16.8 的新增特性。 它可以讓我們在函數組件中使用 state 、生命週期以及其他 react特性，而不僅限於 class 組件。react hooks 的出現，標示着 react中不會在存在無狀態組件了，只有類組件和函數組件。具體可查看官網。

優勢：

1. 函數組件不能使用state，遇到交互更改狀態等複雜邏輯時不能更好地支持，hooks讓函數組件更靠近class組件，擁抱函數式編程。
2. 解決副作⽤問題，hooks出現可以處理數據獲取、訂閱、定時執行任務、手動修改 ReactDOM這些⾏爲副作用，進行副作用邏輯。比如useEffect。
3. 更好寫出有狀態的邏輯重用組件。
4. 讓複雜邏輯簡單化，比如狀態管理：useReducer、useContext。
5. 函數式組件比class組件簡潔，開發的體驗更好，效率更⾼，性能更好。
6. 更容易發現無用的狀態和函數。

useCallback介紹

useCallback 可以說是 useMemo 的語法糖，能用 useCallback 實現的，都可以使用 useMemo, 常用於react的性能優化。在 react 中我們經常面臨一個子組件渲染優化的問題，尤其是在向子組件傳遞函數props時，每次 render 都會創建新函數，導致子組件不必要的渲染，浪費性能，這個時候，就是 useCallback 的用武之地了，useCallback 可以保證，無論 render 多少次，我們的函數都是同一個函數，減小不斷創建的開銷。

const memoCallback= useCallback(callback,array)

返回一個 memoized 回調函數。

• callback是一個函數用於處理邏輯
• array 控制useCallback重新執⾏的數組，array改變時纔會重新執⾏useCallback

1. 不傳數組，每次更新都會重新計算
2. 空數組，只會計算一次
3. 依賴對應的值，對應的值發生變化重新計算

• useCallback返回值是callback本身（useMemo返回的是callback函數的返回值）

useCallback(fn, deps) 相當於 useMemo(() => fn, deps)

useCallback使用

function App () {
  const [ count, setCount ] = useState(0)
  const add = useCallback(() => count + 1, [count])
  return (
    <div>
      點擊次數: { count }
      <br/>
      次數加一: { add() }
      <button onClick={() => { setCount(count + 1)}}>點我</button>
    </div>
    )
}