2.17 useMemo对计算结果进行缓存

一、useMemo对计算结果进行缓存

在使用memo的时候，可能需要缓存对象类型的值

问题案例：

import { memo, useState } from 'react'

const Head = memo(function Head() {
  return (
    <>
      <div>Head, {Math.random()}</div>
    </>
  )
})

function App() {
  const [count, setCount] = useState(0)
  const [msg] = useState('hello snow')
  const list = [msg.toLowerCase(), msg.toUpperCase()]

  const handleClick = () => {
    setCount(count + 1)
  }
  return (
    <>
      <div>Default Template</div>
      <button onClick={handleClick}>按钮</button>
      <Head list={list}></Head>
    </>
  )
}

export default App

因为每次刷新，list都会生成一个新地址，因此对比时候不同，判定刷新，会重新渲染子组件

改进方案

import { memo, useMemo, useState } from 'react'

const Head = memo(function Head() {
  return (
    <>
      <div>Head, {Math.random()}</div>
    </>
  )
})

function App() {
  const [count, setCount] = useState(0)
  const [msg] = useState('hello snow')
  // const list = [msg.toLowerCase(), msg.toUpperCase()]
  // 参数：缓存数据(初始值)，依赖项
  const list = useMemo(() => [msg.toLowerCase(), msg.toUpperCase()], [msg])

  const handleClick = () => {
    setCount(count + 1)
  }
  return (
    <>
      <div>Default Template</div>
      <button onClick={handleClick}>按钮</button>
      <Head list={list}></Head>
    </>
  )
}

export default App

只有msg发生变化时，才会返回新数组

上一页2.16 memo在props不变情况下跳过重新渲染下一页2.18 useCallback对函数进行缓存

最后更新于2年前