:::info

1. useCallback目的：实际是为了性能的优化。
2. 使用场景：useCallback在什么时候进行使用？

场景：在将一个组件中的函数，传递给子元素回调使用时，使用useCallback对函数进行处理。

1. 如何进行性能的优化？

useCallback会返回一个函数的memorized(有记忆的)值
在依赖不变的情况下，多次定义的时候，返回值是相同的 :::

// useCallback的使用方式
const memorixedCallback = useCallback(
  () => {
        doSomething(a, b),
    }, [a, b])

1、错误的使用场景

import React, { useState, useCallback } from 'react'
export default function UseCallbackHookDemo() {
  const [count, setCount] = useState(100)
  // 增加
  const increment = () => {
    console.log('执行increment函数');
    setCount(count + 1)
  }
  // 减少 实际上并没有进行太多的性能优化 实际上每次返回的都是同一个函数 对函数进行了相应的缓存 重新渲染的时候进行了浅层比较
  const decrement = useCallback(() => {
    console.log('执行decrement函数');
    setCount(count - 1)
  }, [count])
  return (
    <div>
      <h2>{ count }</h2>
      <button onClick={ increment }>+1</button>
      <button onClick={ decrement }>-1</button>
    </div>
  )
}

上面的写法，实际上并没有进行太多的性能优化，useCallback回调函数中，我们传入一个函数作为参数，useCallback实际上会返回一个函数的memoized（有记忆）的值；在依赖不变时，多次定义的时候，返回值是相等的。

2、正确的使用场景

# 配置子组件的memo性能优化进行使用
import React, { useState, useCallback, memo } from 'react'
// 定义子组件 使用memo进行相应的包裹
const HYButton = memo((props) => {
  // 返回dom结构
  console.log(props.name, '组件渲染了');
  return <button onClick={ props.increment }>+1</button>
})
export default function UseCallbackHookDemo() {
  // 定义状态
  const [count, setCount] = useState(100)
  // 依赖的其他的状态
  const [show, setShow] = useState(true)
  // 增加
  const increment1 = () => {
    console.log('执行increment1函数');
    setCount(count + 1)
  }
  // 减少 使用useCallback进行了性能优化
  const increment2 = useCallback(() => {
    console.log('执行increment2函数');
    setCount(count + 1)
  }, [count])
  return (
    <div>
      <h2>{ count }</h2>
      <HYButton name="increment1" increment={increment1} />
      <hr/>
      <HYButton name="increment2" increment={increment2} />
      <hr/>
      <button onClick={ e => setShow(!show) }>修改组件内的状态</button>
    </div>
  )
}