useCallback

import React, {
  useState, useCallback
} from 'react'

export default function CallbackHookDemo01() {
  const [count, setcount] = useState(0)
  function increment1() {
    setcount(count + 1)
  }

  // useCallBack 函数每次点击的时候都会执行，里面count 是否变化，根据依赖定
  const increment2 = useCallback(
    () => {
      setcount(count + 1)
    },
    [count],
  )

  console.log(typeof increment2); // function


  return (
    <div>
      <h2>CallbackHookDemo01: {count}</h2>
      <button onClick={increment1}>+1</button>
      <button onClick={increment2}>+1</button>
    </div>
  )
}

• increment2 中的回调函数形成闭包，如果不依赖count，则每次点击的时候都是1
• 上述代码使用useCallback并不会有性能优化的表现

对代码做优化

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


  const Button = memo( (props) => {
    console.log("HYButton重新渲染", props.title);
    return <button onClick = {props.increment}> +1 </button>
  })
   
  export default function CallbackHookDemo02() {
    const [counte, setcounte] = useState(0)
    const [show, setshow] = useState(true)
    
    const incerment1 = () => {
      setcounte(counte + 1)
    }

    const increment2 = useCallback(() => {
      setcounte(counte + 1)
    }, [counte])

    return (
      <div>
        <h2>CallbackHookDemo02: {counte}</h2>
        <Button title="btn1" increment={incerment1}></Button>
        <Button title="btn2" increment={increment2}></Button>

        <button onClick = { e => setshow(!show)
        } > show切换</button>

      </div>
    )

    
  }

• 创建一个button组件，使用memo，当props没有发生改变的时候，子组件不用重新渲染
• 切换show的值，btn1 组件发生渲染，btn2 组件未渲染，原因： show值每次改变，CallbackHookDemo02被渲染，increment1也重新被创建，所以btn1组件被重新渲染。因为count值未发生改变，increment2 未重新定义，所以btn1组件不需要被重新渲染。通过useCallBack和memo的结合，实现了性能优化，避免组件多次进行无效渲染