一次线上Crash引发的ref复盘

博客围绕React开发展开,项目用RN和react - navigation做导航,为统一逻辑使用高阶组件,但遇到问题。若组件既作路由页又作普通组件,存在生命周期选择难题;父组件调用子组件方法时,因高阶组件使ref嵌套复杂,作者的crash就源于高阶优化时ref指向问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

事故现场

项目使用RN开发且用react-navigation做的导航,要想每个页面在显示时都调用某个逻辑,我需要在每个页面的如下生命周期做如下两件事情:


 blurListener: any = null;
 focusListener: any = null;
 
 componentWillUnmount() {
    this.blurListener && this.blurListener();
    this.focusListener && this.focusListener();
 }

 componentDidMount() {  
    // 非导航页面
    if(!this.props.navigation) {
       this.refWraper.current?.componentFocus && this.refWraper.current?.componentFocus();
       return;
    }
    //  屏幕失焦时会发出此事件
    this.blurListener = this.props?.navigation?.addListener('blur', () => {
      this.refWraper.current?.componentBlur && this.refWraper.current?.componentBlur();
    });
    // 当屏幕聚焦时会发出此事件
    this.focusListener = this.props?.navigation?.addListener('focus', () => {
      this.refWraper.current?.componentFocus && this.refWraper.current?.componentFocus();
    });
}

写一次还好,类似需求的所有页面都要搞这么一堆,那就有点头疼了。 因此就搞了一个高阶组件,将上诉逻辑统一归置到高阶中,这样就给所有的页面增加了两个生命周期componentFocus/componentBlur

所有的路由页面都套上该高阶组件是没有问题的,但如果一个组件既用做路由页面也用作普通组件,就会有如下两个问题:

  1. 该组件应该使用哪个生命周期
    当该组件用做路由页面时,我们应该用componentFocus还是componentDidMount来初始话信息,只用前者,该组件作为普通组件不会调用,只用后者,该组件作为路由页面无法每次页面显示都调用。我是在上诉高阶里处理的,具体代码在【非导航页面】那块。
  2. ref的嵌套问题
    当作为普通组件,父组件需要调用子组件的方法,我一般通过ref获取实例来引用,但因为高阶组件的存在我得先找到高阶组件的ref,在从高阶组价中找到真正组件的ref,接着进行函数调用。我不想搞的这么麻烦,就在高阶组件中增加了如下一行:
    refWraper = this.props.curRef || React.createRef<BlurFocusLifeCircle>();
    

我的crash就是因为做高阶优化时忘了将ref指向真正的组件

ref的历史变化

TODO

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值