React Hooks系列之useMemo

useMemo介紹

useMemo用於性能優化，通過記憶值來避免在每個渲染上執行高開銷的計算。

const memoizedValue = useMemo(callbanck, array)

返回一個memoized 值

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

1. 不傳數組，每次更新都會重新計算
2. 空數組，只會計算一次
3. 依賴對應的值，當對應的值發生變化時，才會重新計算（可以依賴另外一個 useMemo 返回的值）

• useMemo 的返回值是一個記憶值，是 callback 的返回值

把 創建函數 和 依賴項數組作為參數傳入 useMemo，它僅會在某個依賴項改變時才重新計算memoized 值。這種優化有助於避免在每次渲染時都進行高開銷的計算。

記住，傳入 useMemo 的函數會在渲染期間執行 （切記不是渲染后執行）。請不要在這個函數內部執行與渲染無關的操作，諸如副作用之類的操作屬於useEffect 的適用范疇，而不是useMemo。

潛台詞就是不能在useMemo 里面寫副作用邏輯處理，副作用的邏輯處理放在 useEffect 內進行處理。在我的印象中和 Vue 的computed 計算屬性類似。都是根據依賴的值計算出結果，當依賴的值未發生變化的時候，不觸發狀態改變。適用於復雜的計算場景，例如復雜的列表渲染，對象深拷貝等場景

如果沒有提供依賴項數組，useMemo 在每次渲染時都會計算新的值

你可以把 useMemo 作為性能優化的手段，但不要把它當成語義上的保證。將來，React 可能會選擇“遺忘”以前的一些 memoized 值，並在下次渲染時重新計算他們，比如為離屏組件釋放內存。先編寫在沒有 useMemo 的情況下也可以執行的代碼 ——之后再在你的代碼中添加 useMemo， 以達到優化性能的目的

useMemo用法

例子：

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