React中useMemo 和 useCallback 的区别小结

const value = useMemo(() => {
  return result
}, [])

const fn = useCallback(() => {
  console.log("hello")
}, [])

const memoizedValue = useMemo(() => {
  return compute()
}, [deps])

const total = useMemo(() => {
  console.log("执行计算")

  return price * count
}, [price, count])

price
count

const products = [...]

const filteredProducts = products.filter(...)

setInputValue(...)

const filteredProducts = useMemo(() => {
  return products.filter(...)
}, [products])

const memoizedFn = useCallback(() => {
  ...
}, [deps])

const handleClick = useCallback(() => {
  console.log("点击")
}, [])

function App() {
  const handleClick = () => {}

  return <Child onClick={handleClick} />
}

handleClick

旧函数 !== 新函数

Child

React.memo

props变化了

const handleClick = useCallback(() => {}, [])

useMemo 缓存结果

useCallback 缓存函数

const total = useMemo(() => {
  return price * count
}, [price, count])

100
200
300

const handleClick = useCallback(() => {
  console.log("hello")
}, [])

function

computed

const total = computed(() => {
  return price.value * count.value
})

函数引用是否变化

const handleClick = useCallback(() => {
  console.log("hello")
}, [])

useCallback

() => console.log("hello")

1000+
10000+

<Child onClick={handleClick} />