React：useCallback

说明

https://zh-hans.react.dev/reference/react/useCallback

useCallback 是一个允许你在多次渲染中缓存函数的 React Hook。

使用useCallback包裹函数之后，函数可以保证在父组件重新渲染的时候保持引用稳定。

语法：

const cachedFn = useCallback(fn, dependencies)

返回值：
在初次渲染时，useCallback 返回你已经传入的 fn 函数。
在之后的渲染中, 如果依赖没有改变，useCallback 返回上一次渲染中缓存的 fn 函数；否则返回这一次渲染传入的 fn。

示例

import { memo, useCallback, useState } from "react"

const Input = memo(function Input({ onChange }) {
  console.log('子组件重新渲染了')
  return <input type="text" onChange={e => onChange(e.target.value)} />
})

function App() {
  console.log('父组件被重新渲染了')

  // 传给子组件的函数
  const changeHandler = useCallback((value) => {
    console.log(value)
  }, [])

  const [count, setCount] = useState(0)
  return (
    <div className="App">
      {/* 子传父 */}
      <Input onChange={changeHandler} />
      {/* 触发父组件重新渲染 */}
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div >
  )
}

export default App

初始展示：

点击按钮，触发父组件重新渲染，子组件没有重新渲染：