在React中使用useRef时搭配null-forgiving操作符是否属于不良实践？

这种写法不算严格的不良实践，但要结合具体场景判断合理性：

• 合理使用的场景：
  像例子里这样，组件直接返回固定的div、没有条件渲染逻辑时，组件挂载后ref.current必然会被赋值为对应DOM元素。这种情况下用null!是合理的——你明确知道后续不会出现null，用非空断言省去每次使用时的空判断，能让代码更简洁。

• 需要警惕的风险：
  非空断言!只是给TypeScript编译器的提示，不会做任何运行时的空值检查。如果后续组件迭代时，这个div被改成条件渲染（比如加了{show && <div ref={ref} />}），那ref.current就有可能是null，此时之前用断言跳过的空判断会直接导致运行时错误。

• 替代方案参考：

  1. 如果你能100%保证ref对应的元素始终存在，用null!完全没问题；
  2. 如果元素可能动态出现/消失，建议保留空判断，或者用可选链ref.current?.xxx安全访问；
  3. 处理ref相关逻辑时，优先放在useEffect里——useEffect会在组件挂载后执行，此时ref已经完成赋值，不需要额外判断：

     const Component: React.FC<{}> = () => {
         const ref = React.useRef<HTMLDivElement>(null);
     
         useEffect(() => {
             // 这里ref.current必然有值
             console.log(ref.current.offsetWidth);
         }, []);
     
         return <div ref={ref} />;
     }
     

内容的提问来源于stack exchange，提问作者doliphin