useCallback和useMemo的正確用法詳解

更新時(shí)間：2023年01月15日 10:43:48 作者：糖瓶

這篇文章主要為大家介紹了useCallback和useMemo的正確用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

現(xiàn)實(shí)很多項(xiàng)目存在大量的useMemo和useCallback，大多數(shù)的使用并沒有起到實(shí)際作用，使得項(xiàng)目的渲染效率更低了。

我們在應(yīng)用程序中使用useMemo和useCallback這兩個(gè)Hook，主要是因?yàn)橄胍彺娼Y(jié)果：

緩存props值，防止重復(fù)渲染。
緩存復(fù)雜的計(jì)算，避免重復(fù)計(jì)算。

所以我們經(jīng)常這樣使用這兩個(gè)Hook：

緩存值

useMemo 緩存value，防止重新渲染。以下是偽代碼：

const AppItem = ({item, data}) => <button>{item.val + newDate}</button>
const App = ({data}) => {
  const newDate = useMemo(() => data.value, [data.value])
  return (
    <>
      {
        list.map(item => {
          return <AppItem key={item.id} item={item} data={newDate} />
        })
      }
    </>
  )
}

緩存函數(shù)

useCallback緩存click 事件，防止重復(fù)渲染。以下是偽代碼：

const AppItem = ({item, data, onClick}) => <button onClick={onClick}>{item.val + newDate}</button>
const App = ({data}) => {
  const newDate = useMemo(() => data.value, [data.value])
  const onClick = useCallback(() => {
    // ...
  }, [])
  return (
    <>
      {
        list.map(item => {
          return <AppItem key={item.id} item={item} data={newDate} onClick={onClick} />
        })
      }
    </>
  )
}

上述是我們經(jīng)常見到的場景。但是這樣使用就一定是正確的嗎？答案是否定的。之前寫過一篇React為什么會重新渲染的文章。這里在解釋下。

組件為什么會重新渲染

重新渲染其中一個(gè)原因就是：state 或者 props 發(fā)生變化時(shí)。所以我們很天真的認(rèn)為只要state或者props不變，組件就不會重新渲染了。

組件的重新渲染還有一個(gè)原因，我們知道但是經(jīng)常在我們寫代碼的時(shí)候會忽略的原因：就是他的父組件重新渲染了。父組件渲染了，我們只在子組件內(nèi)部緩存值或者函數(shù)是沒有作用的。

看一個(gè)例子：

const App = () => {
	const [count, setCount] = useState(0)
  return (
    <>
      <button onClick={() => setCount(count+1)}>點(diǎn)我</button>
      <OtherComp />
    </>
  )
}

我們可以看到：點(diǎn)擊按鈕，App組件重新渲染，他的子組件OtherComp雖然沒有任何的state或者props變化，但是他也重新渲染了。如果這個(gè)子組件也有子組件，以此類推，就會形成一條渲染鏈。

但是我們不是經(jīng)常這樣寫嗎：在這個(gè)組件中使用緩存手段。

const App = ({val}) => {
	const [count, setCount] = useState(0)
  const onClick = useCallback(() => {
    // ...
  }, [])
  const data = useMemo(() => val, [val])
  return (
    <>
      <button onClick={() => setCount(count+1)}>點(diǎn)我</button>
      <OtherComp onClick={onClick} data={data} />
    </>
  )
}

這樣并不會阻止子組件的重新渲染。怎樣解決呢？當(dāng)然是還要緩存子組件了。

const OtherCompMemo = React.memo(OtherComp)
const App = ({val}) => {
	const [count, setCount] = useState(0)
  const onClick = useCallback(() => {
    // ...
  }, [])
  const data = useMemo(() => val, [val])
  return (
    <>
      <button onClick={() => setCount(count+1)}>點(diǎn)我</button>
      <OtherCompMemo onClick={onClick} data={data} />
    </>
  )
}

現(xiàn)在React會識別props沒有變化，onClick 和 data也被緩存了，所以需要配合使用。

緩存復(fù)雜的計(jì)算

根據(jù)React文檔：useMemo是用來緩存復(fù)雜計(jì)算的。假設(shè)有一個(gè)100000項(xiàng)的數(shù)組需要排序操作，此時(shí)我們應(yīng)該緩存復(fù)雜的計(jì)算：

const dataList = ({data}) => {
  const contentNode = useMemo(() => {
    return data.map(item => {
        return <div key={item}>{item}</div>
      })
  }, [data, sort]);
  return contentNode;
}