React Hook 中useCallback介绍使用与场景

useCallback介绍

• 试想一下: 当你更新name属性时, 重新调用render之后所有的事件处理函数重新全部定义, 非常浪费性能
• 解决: 当依赖的属性没有改变时, 不希望更新render时, 重新定义事件函数

useCallback使用

• useCallBack时机目标是为了进行性能的优化

• 如何性能性能的优化呢?

  • useCallBack会返回一个函数memoized(记忆的) 值
  • 在依赖不变的情况下, 多定义的时候, 返回值是相同的

const increment2 = useCallback(() => {
  console.log('increment2被调用了')
  setCount(count + 1)
}, [count])

useCallback使用场景

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

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

const JMButton = memo(props => {
  console.log('HYButton重新渲染: ', props.title)
  return <button onClick={props.increment}>JMButton+1</button>
})

export default function CallBackHomeDemo2() {
  // useCallback: 希望更新父组件的state时,子组件不被render渲染
  // 1.使用memo包裹子组件进行性能优化,子组件没有依赖的props或state没有修改,不会进行render
  // 2.一个疑问: 为什么 btn1 还是被渲染了?
  //  (1)因为子组件依赖的 increment1 函数,在父组件没有进行缓存(在函数重新render时,increment1被重新定义了)
  //  (2)而 increment2 函数在父组件中被缓存了,所以memo函数进行性浅层比较时依赖的increment2是一样的所以没有被重新render渲染
  // 3.useCallback在什么时候使用?
  //  场景: 在将一个组件中的函数, 传递给子元素进行回调使用时, 使用useCallback对函数进行处理.

  console.log('CallBackHomeDemo2重新渲染')
  const [count, setCount] = useState(0)
  const [show, setShow] = useState(true)

  const increment1 = () => {
    console.log('increment1被调用了')
    setCount(count + 1)
  }

  const increment2 = useCallback(() => {
    console.log('increment2被调用了')
    setCount(count + 1)
  }, [count])

  return (
    <div>
      <h2>CallBackHomeDemo: {count}</h2>
      <JMButton increment={increment1} title="btn1" />
      <JMButton increment={increment2} title="btn2" />

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