为什么用 useCallback

别的文章讲，当将一个方法A作为prop传递给子组件的时候，假如不用useCallback，每次A都是新的，子组件接受新的方法A会重新渲染，这样导致了不必要的重复渲染。

在其他情况下，似乎没什么用处，比如下面这个情况

import { useCallback, useState } from "react"


const Counter = ()=> {
  const [count, setCount] = useState(0)
  // 每次都会执行，这种情况下 useCallback 似乎没什么用
  console.log(111);

  // const handleCount = ()=> {
  //   // react 状态更新是异步的，这么写不保证拿到最新值
  //   // setCount(count + 1)
  //   // 函数式写法可以保证拿到最新值
  //   setCount(prevCount => prevCount + 1) // 推荐这么写
  // }

  // const handleCount = useCallback(()=> {
  //   // react 状态更新是异步的，这么写不保证拿到最新值
  //   // setCount(count + 1)
  //   // 函数式写法可以保证拿到最新值

  //   // 推荐的做法是使用函数式更新，并将依赖项数组保持为空，
  // 以确保 handleCount 在整个组件生命周期内保持稳定。
  //   setCount(prevCount => prevCount + 1) // 推荐这么写
  // }, [])


  const handleCount = useCallback(() => {
    // react 状态更新是异步的，这么写不保证拿到最新值
    // setCount(count + 1)
    // 函数式写法可以保证拿到最新值

    // 假如用这种写法，依赖项count是要加的，
    //这样做的目的是count变化，handleCount重新创建，保证能取到最新的count值
    setCount(count + 1) 
  }, [count])


  return (
    <>
      <div>{count}</div>
      <button onClick={handleCount}>increaseCount</button>
    </>
  )
}

const App = () => {
  const [num, setNum] = useState(0)
  return (
    <>
      <div>{num}</div>
      <button onClick={()=> setNum((num) => num +1)}>increNum</button>
      <Counter></Counter>
    </>
  )
}

export default App