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 (
    <div>
      <input type="text" onChange={props.onChange}/>
    </div>
  )
})

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

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

  return (
    <div>
      <div>count: {count}</div>
      <div>text: {text}</div>
      <button onClick={() => {
        setCount(count + 1)
      }}>+1</button>
      <Child onChange={handleOnChange} />
    </div>
  )
}

function App() {
  return <div><Parent /></div>
}

export default App
  1. handleOnChange被缓存了下来,尽管父组件更新了,但是拿到的handleOnChange还是同一个
  2. 对比useMemo,useMemo缓存的是一个值,useCallback缓存的是一个函数,是对一个单独的props值进行缓存
  3. memo缓存的是组件本身,是站在全局的角度进行优化
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。