reactjs 将允许为空的运算符与“useRef”一起使用是否是不好的做法?

ulydmbyx  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(119)

以下行为是否被视为不良做法?

const Component: React.FC<{}> = () => {
    const ref = React.useRef<HTMLDivElement>(null!);

    return <div ref={ref} />;
}

具体来说,我指的是null!的使用。
如果没有零容忍操作符,我们需要执行如下检查

if (ref.current) {
   // ... use ref.current
}

每一次。

juud5qan

juud5qan1#

以下行为是否被视为不良做法?

const Component: React.FC<{}> = () => {
    const ref = React.useRef<HTMLDivElement>(null!);
    
    return <div ref={ref} />;
}

这对您没有任何好处,而且可能会在以后屏蔽null访问-特别是在卸载组件时。
假设我们在组件中添加了一个效果(代码编写不当),并使用了一个cleanup回调:

useEffect(() => {
    ref.current.focus();
    return () => ref.current.blur();
});

当效果清理运行时,ref.current将为空。Typescript通常会检测到这一点并报告'ref.current' is possibly null,但通过使用null!初始化ref,我们(错误地)Assertref.current永远不会为空。因此,我们没有在编码时检测到问题,而是得到了一个运行时错误。

相关问题