在React中“回调”通常指把函数作为参数传递给另一个组件或Hook在特定时机被调用。贯穿事件处理、状态更新、副作用、性能优化、组件通信等场景。事件处理中的回调最基础的形式把函数传给JSX的事件属性functionButton(){consthandleClick(){console.log(clicked)}returnbutton onClick{handleClick}点我/button}这个{handleClick}是传递函数引用需要传参时用箭头函数包装button onClick{() handleDelete(id)}删除/ button回调作为props父子通信父组件把函数传给子组件子组件调用它把数据回传给父组件functionChild({onSelect}){returnbutton onClick{()onSelect(hello)}选择/button}functionParent(){consthandleSelect(value)console.log(value)returnChild onSelect{handleSelect}/}回调中的闭包陷阱这是React回调里最容易踩的坑函数组件每次渲染都会创建新的作用域回调会捕获当次渲染的变量functionCounter(){const[count,setCount]useState(0)useEffect((){consttimersetInterval((){console.log(count)// 永远是 0},1000)return()clearInterval(timer)},[])// 空依赖回调闭包捕获了初始 count}解决办法把依赖写进依赖数组 [count]用 setCount(c c 1) 的函数式更新用 useRef 保存最新值用 useEffectEventReact 实验性 API读取最新值而不重建回调useCallBack缓存回调引用每次渲染都会重新创建函数如果作为prop传给用React.memo包裹的子组件会导致子组件无意义的重渲染consthandleClickuseCallback((){doSomething(a,b)},[a,b])