useCallback

1. 问题引发

1. 子组件onChange调用了父组件的handleOnChange
2. 父组件handleOnChange内部会执行setText(e.target.value)引起父组件更新
3. 父组件更新会得到新的handleOnChange，传递给子组件，对于子组件来说接收到一个新的props
4. 子组件进行不必要更新

2. 使用useCallback解决

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

const Child = memo((props) => {
  console.log(props);

  return (
    

      
    
  )
})

const Parent = () => {
  const [count, setCount] = useState(0)
  const [text, setText] = useState('')

  const handleOnChange = useCallback((e) => {
    setText(e.target.value)
  },[])

  return (
    

      
count: {count}
      
text: {text}
       {
        setCount(count + 1)
      }}>+1
      
    
  )
}

function App() {
  return 

}

export default App

1. handleOnChange被缓存了下来，尽管父组件更新了，但是拿到的handleOnChange还是同一个
2. 对比useMemo，useMemo缓存的是一个值，useCallback缓存的是一个函数，是对一个单独的props值进行缓存
3. memo缓存的是组件本身，是站在全局的角度进行优化