React,Hooks中UseCallback的使用

useCallback:是为了性能的优化

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

先说一下useCallback不能做的性能优化

import React, { useState, useCallback } from 'react'
export default function UseCallbackDemoOne() {
  const [count,setCount] = useState(0)
  
  const  increament1 = () => {
  
    console.log('执行increament1')
    setCount(count + 1)
  }
 
  const  increament2 = useCallback(()=>{
    console.log('执行increament2')
    setCount(count + 1)
  },[])

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={increament1}>+1</button>
      <button onClick={increament2}>+1</button>
    </div>
  )
}

首先当我们点击多少次的时候，increament1肯定执行多少次,但是当我们点击increament2时候，页面并没有发生变化,因为这个里面返回的永远是同样的初始count0，当给它一个依赖值就可以了,当没有依赖的情况下，increament2永远返回的是同一个值

 const  increament2 = useCallback(()=>{
    console.log('执行increament2')
    setCount(count + 1)
  },[count])

再说一下useCallback能做的性能优化

当我们修改父组件里面值的时候，子组件肯定也会重新渲染，但是我们不想它重新渲染，怎么做呢?

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

const HYButton = memo((props)=>{
  console.log(props.title)
  return <button onClick={props.increament}>HYButton+1</button>
})

export default function UseCallbackDemoOne() {

  const [count,setCount] = useState(0)
  const [show,setShow] = useState(true)
   
  const  increament1 = () => {
    console.log('执行increament1')
    setCount(count + 1)
  }
  
  const  increament2 = useCallback(()=>{
    console.log('执行increament2')
    setCount(count + 1)
  },[count])
  

  return (
    <div>
      <h2>{count}</h2>
      <HYButton title="btn1" increament={increament1}/>
      <HYButton title="btn2" increament={increament2}/>

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

当父组件发生改变时候,里面的子组件也会重新渲染，怎么解决,加一个memo,可以看到btn1是重新渲染,而btn2没有,因为increament2依赖的count没有改变，所以每次返回都是相同的值，所以btn2就不会重新渲染

那么useCallback在什么场景使用?

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