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

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

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

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

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

  1. if (ref.current) {
  2. // ... use ref.current
  3. }

每一次。

juud5qan

juud5qan1#

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

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

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

  1. useEffect(() => {
  2. ref.current.focus();
  3. return () => ref.current.blur();
  4. });

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

展开查看全部

相关问题