正文

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

我們?cè)趹?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)常見到的場(chǎng)景。但是這樣使用就一定是正確的嗎？答案是否定的。之前寫過(guò)一篇React為什么會(huì)重新渲染的文章。這里在解釋下。

組件為什么會(huì)重新渲染

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

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

看一個(gè)例子：

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

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

但是我們不是經(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} />
    </>
  )
}

這樣并不會(huì)阻止子組件的重新渲染。怎樣解決呢？當(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會(huì)識(shí)別props沒(méi)有變化，onClick 和 data也被緩存了，所以需要配合使用。

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

根據(jù)React文檔：useMemo是用來(lái)緩存復(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;
}

什么是復(fù)雜的計(jì)算

• 你可以通過(guò) preformance.now() 進(jìn)行計(jì)算消耗的時(shí)間。
• React官方的開發(fā)工具中的profiler 記錄查看，記錄里會(huì)顯示復(fù)雜的計(jì)算。

何時(shí)進(jìn)行優(yōu)化呢

• 如果你可以通過(guò)組織代碼結(jié)構(gòu)來(lái)提高性能，那就沒(méi)有必要使用useCallback和useMemo。
• 如果你不知道使用useCallback和useMemo能否帶來(lái)更大的好處，就不需要使用它們，因?yàn)槭褂盟鼈円残枰男阅堋?/li>

總結(jié)

• useMemo和useCallback只是針對(duì)重新渲染才是有幫助的，對(duì)第一次的渲染是有害的，消耗性能的。
• 大多數(shù)情況下，單獨(dú)使用useMemo和useCallback或memo是沒(méi)有幫助的，需要結(jié)合父組件具體情況來(lái)看。
• 其實(shí)大多數(shù)情況下，我們并不需要這兩個(gè)hook，使用它們只會(huì)影響初始化的渲染。

以上就是useCallback和useMemo的正確用法詳解的詳細(xì)內(nèi)容，更多關(guān)于useCallback和useMemo用法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論