从源码入手探究一个因useImperativeHandle引起的Bug _生活百科

今天本来正在工位上写着一段很普通的业务代码，将其简化后大致如下：
function App(props: any) {// 父组件const subRef = useRef<any>(null)const [forceUpdate, setForceUpdate] = useState<number>(0)const callRef = () => {subRef.current.sayName() // 调用子组件的方法}const refreshApp = () => { // 模拟父组件刷新的方法setForceUpdate(forceUpdate + 1)}return <div><SubCmp1 refreshApp={refreshApp} callRef={callRef} /><SubCmp2 ref={subRef} /></div>}class SubCmp1 extends React.Component<any, any> { // 子组件1constructor(props: any) {super(props)this.state = {count: 0}}add = () => {this.props.refreshApp()// 会导致父组件重渲染的操作// 修改自身数据，并在回调函数中调用外部方法this.setState({ count: this.state.count + 1 }, () => {this.props.callRef()})}render() {return <div><button onClick={this.add}>Add</button><span>{this.state.count}</span></div>}}const SubCmp2 = forwardRef((props: any, ref) => { // 子组件2useImperativeHandle(ref, () => {return {sayName: () => {console.log('SubCmp2')}}})return <div>SubCmp2</div>})代码结构其实非常简单，一个父组件包含有两个子组件。其中的组件2因为要在父组件中调用它的内部方法，所以用forwardRef包裹，并通过useImperativeHandle向外暴露方法。组件1则是通过props传递了两个父组件的方法，一个是用于间接地访问组件2中的方法，另一个则是可能导致父组件重渲染的方法（当然这种结构的安排明显是不太合理的，但由于项目历史包袱的原因咱就先不考虑这个问题了\doge）。
然后当我满心欢喜地

从源码入手探究一个因useImperativeHandle引起的Bug

推荐阅读

灌篮高手手游为什么感觉大家都喜欢海边球场？

2022年8月9日宝宝出生的五行缺什么沙石金开执位属五行

当下的语文教材，叫好者有之，质疑者同样有之。你怎么看呢？

台式烤肠用烤箱烤多长时间烤肠用烤箱烤多长时间

大头菜炒柿子做法大头菜炒柿子

想离婚财产怎么分

汽车香水危害与好处车用香水有哪些危害

王者荣耀秋分时节活动攻略-秋分时节时间与奖励一览推荐阅读

属鸡人双鱼座女生性格

健身喝蛋白粉的副作用影响肾脏功能

洛克王国宠物练级攻略洛克王国雪精灵练级攻略

新课程的三维目标是什么

关于鮠科简述鮠科

有强迫症桌面一定要很干净整洁的星座

上初中要军训吗上初中要军训吗？

入门朝东还是朝西好入门朝东还是朝西好一点呢

关于替嫁后我被病娇总裁宠上了简述替嫁后我被病娇总裁宠上了

税控盘减免后的增值税怎么计提税控盘减免的增值税怎么做账

关于曹正海简述曹正海

紫色配什么颜色好看,紫色衣服和什么颜色搭配