杰霸霸博客

主题

useCallback函数 ​

useMemo可以缓存值，还可以缓存函数对象，但是写起来比较奇怪，比如：

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

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

function App() {
  const [num, setNum] = useState(0)
  const [msg, setMsg] = useState('hello')
  // 回调里面又套了回调函数
  const fn = useMemo(()=> ()=>{console.log("msg", msg)}, [msg])
  const clickHandle = ()=>{
    setNum(num+1)
    console.log(num)
  }

  return (
    <div>
      <button onClick={clickHandle}>点击</button>
      {num}
      <Head fn={fn}/>
    </div>
  )
}
export default App

1. 使用useCallback ​

useCallback可以优化写法：

jsx
import { useState, memo, useCallback } from 'react'

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

function App() {
  const [num, setNum] = useState(0)
  const [msg, setMsg] = useState('hello')
  const fn = useCallback(()=>{console.log("msg", msg)}, [msg])
  const clickHandle = ()=>{
    setNum(num+1)
    console.log(num)
  }

  return (
    <div>
      <button onClick={clickHandle}>点击</button>
      {num}
      <Head fn={fn}/>
    </div>
  )
}

export default App

可以理解useCallback就是useMemo的特例，运行效果如下：
Alt text