react Hooks 之 useCallback、useMemo、memo基礎使用

作用

都為性能優化，避免組件內的重復渲染次數。
某子組件只依賴了父組件內的方法，觸發父組件內的方法時，會重復渲染子組件

const Child =(props) => {
  console.log(props, 'child-props');
  // 父組件觸發setCount方法，就會打印props
  return (
    <div>
      <input type="text />
    </div>
  )
}


const Parent = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <div>count: {count}</div>
      <button onClick={setCount(count + 1)}></button>
      <Child />
    </div>
  )
}

export default () => {
    <div>
         <Parent />
    </div>
}

使用

memo

memo的使用對象為組件，且一般為某組件內的子組件，以上述代碼為例，使用memo函數將Child包裹住，可以避免重復渲染

memo官網

const Child = React.memo((props) => {
  console.log(props, 'child-props');
  // 父組件觸發setCount方法，不會重復打印
  return (
    <div>
      <input type="text />
    </div>
  )
})

useCallback

memo緩存組件，useCallback緩存函數，若把上述代碼改為下面這樣，則還會重復打印，此時的優化需有memo和useCallback配合使用
child子組件只使用了父組件中的方法，且方法是不變的，input change時會調用父組件內的方法，handleChange方法會多次掛載

const Child = memo((props) => { // 使用memo包裹優化
  console.log(props, 'child-props');
  return (
    <div>
      <input type="text" onChange={props.onChange} />
    </div>
  )
})


const Parent = () => {
  const [text, setText] = useState('')
  // const hanleChange = (e) => {
  //  setText(e.target.value)
  // }
   // ⬇️優化寫法
  const hanleChange = useCallback((e) => {
    setText(e.target.value)
  }, [])
  return (
    <div>
      <div>count: {text}</div>
      <Child onChange={hanleChange}  />
    </div>
  )
}

export default () => {
    <div>
         <Parent />
    </div>
}

useMemo

很多時候，我們需要在組件中計算數據，例如將數組組合到單個值，或者排序、過濾等。希望在其他狀態發生變化時，不需要再重復 render。 useMemo 它與 useCallback 密切相關，但用於優化數據處理。它有相同的 API 來定義它所依賴的值。傳入需要創建的函數和依賴項數組。 useMemo 只會在某個依賴項發生更改時重新計算 memoized 值。 此優化有助於避免在每個渲染上進行高開銷的計算，如果沒有提供依賴項數組，那么 useMemo 將會在每次渲染時重新計算新的值

import { useMemo } from 'rax';

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

參考 rax