日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

useCallback和useMemo的正確用法詳解_React

作者：糖瓶 ? 更新時間： 2023-03-05 編程語言

正文

現實很多項目存在大量的useMemo和useCallback，大多數的使用并沒有起到實際作用，使得項目的渲染效率更低了。

我們在應用程序中使用useMemo和useCallback這兩個Hook，主要是因為想要緩存結果：

  • 緩存props值，防止重復渲染。
  • 緩存復雜的計算，避免重復計算。

所以我們經常這樣使用這兩個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} />
        })
      }
    </>
  )
}

緩存函數

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

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

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

組件為什么會重新渲染

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

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

看一個例子：

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

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

但是我們不是經常這樣寫嗎：在這個組件中使用緩存手段。

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

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

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)}>點我</button>
      <OtherCompMemo onClick={onClick} data={data} />
    </>
  )
}

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

緩存復雜的計算

根據React文檔：useMemo是用來緩存復雜計算的。假設有一個100000項的數組需要排序操作，此時我們應該緩存復雜的計算：

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

什么是復雜的計算

  • 你可以通過 preformance.now() 進行計算消耗的時間。
  • React官方的開發工具中的profiler 記錄查看，記錄里會顯示復雜的計算。

何時進行優化呢

  • 如果你可以通過組織代碼結構來提高性能，那就沒有必要使用useCallback和useMemo。
  • 如果你不知道使用useCallback和useMemo能否帶來更大的好處，就不需要使用它們，因為使用它們也需要消耗性能。

總結

  • useMemo和useCallback只是針對重新渲染才是有幫助的，對第一次的渲染是有害的，消耗性能的。
  • 大多數情況下，單獨使用useMemo和useCallback或memo是沒有幫助的，需要結合父組件具體情況來看。
  • 其實大多數情況下，我們并不需要這兩個hook，使用它們只會影響初始化的渲染。

原文鏈接：https://juejin.cn/post/7188338442869473335

欄目分類
最近更新