以下行为是否被视为不良做法?
const Component: React.FC<{}> = () => { const ref = React.useRef<HTMLDivElement>(null!); return <div ref={ref} />; }
具体来说,我指的是null!的使用。如果没有零容忍操作符,我们需要执行如下检查
null!
if (ref.current) { // ... use ref.current }
每一次。
juud5qan1#
这对您没有任何好处,而且可能会在以后屏蔽null访问-特别是在卸载组件时。假设我们在组件中添加了一个效果(代码编写不当),并使用了一个cleanup回调:
null
useEffect(() => { ref.current.focus(); return () => ref.current.blur(); });
当效果清理运行时,ref.current将为空。Typescript通常会检测到这一点并报告'ref.current' is possibly null,但通过使用null!初始化ref,我们(错误地)Assertref.current永远不会为空。因此,我们没有在编码时检测到问题,而是得到了一个运行时错误。
ref.current
'ref.current' is possibly null
1条答案
按热度按时间juud5qan1#
以下行为是否被视为不良做法?
这对您没有任何好处,而且可能会在以后屏蔽
null
访问-特别是在卸载组件时。假设我们在组件中添加了一个效果(代码编写不当),并使用了一个cleanup回调:
当效果清理运行时,
ref.current
将为空。Typescript通常会检测到这一点并报告'ref.current' is possibly null
,但通过使用null!
初始化ref,我们(错误地)Assertref.current
永远不会为空。因此,我们没有在编码时检测到问题,而是得到了一个运行时错误。