2.18 useCallback对函数进行缓存

一、useCallback对函数进行缓存

useCallback是useMemo的一种特例写法

使用函数，也会出现2.17出现的情况

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 fn = () => {
    console.log(msg)
  }

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

export default App

使用useMemo改造后

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 fn = () => {
  //   console.log(msg)
  // }
  const fn = useMemo(
    () => () => {
      console.log(msg)
    },
    [msg]
  )

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

export default App

默认是函数套函数

useCallback改造写法：

import { memo, useCallback, 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 = useMemo(() => [msg.toLowerCase(), msg.toUpperCase()], [msg])

  // const fn = () => {
  //   console.log(msg)
  // }
  const fn = useCallback(() => {
    console.log(msg)
  }, [msg])

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

export default App

useCallback默认就是函数比useMemo简写了一个函数

上一页2.17 useMemo对计算结果进行缓存下一页2.19 startTransition方法及并发模式

最后更新于2年前