usecallback 无效

来源：3-7 memo、useMemo和useCallback案例讲解

Frammm

2023-11-12

import { useState, useMemo, useCallback, memo } from ‘react’;

function App() {
const [count, setCount] = useState(1)

const handleClick = () => {
setCount(count => count+1)
}

const handleUpdate = useCallback(() => {
console.log(‘子节点点击’)
}, [])
return (

{count}
<button onClick={() => {
handleClick()
}}>add

  <Child customizelick={() => {handleUpdate()}} />
  <ChildTow />
</div>

);
}

const Child = memo((props) => {
console.log(‘孩子1’)
return

child node<button onClick={() => {props.customizelick()}}>click

})

const ChildTow = memo((props) => {
console.log(‘孩子2’)
return

child node

})

export default App;
老师你好，上述代码，每当我点击add按钮的时候，不会打印“孩子2”，但依然打印了“孩子1”，求解答

写回答

1回答

河畔一角

2023-11-12

因为孩子2是个毛孩子。孩子1是个暖宝。

handleUpdate触发的时候会从新渲染child1和child2组件。但是child2组件没有属性，里面还用了memo所以监听不到变化就不会执行。而child1组件有一个属性叫customlize那个方法，每次都会从新创建，所以会执行。除非把customlize用callback包裹进行缓存。

河畔一角

Frammm

有区别，箭头函数每次都会创建一个，而handleUpdate只会创建一次。

2023-11-12

共2条回复

React18+TS 通用后台管理系统解决方案落地实战

全面提升React高阶技能，灵活驾驭各类后台管理系统开发痛点

625 学习 · 226 问题

查看课程

相似问题

prettier无法生效

回答 2