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>
    )
}