传入 null 和 undefined in useRef 之间的区别

Question

useRef(null)和useRef(undefined) （或只是useRef() ）有什么区别？

在 TypeScript 中，结果以不同的类型结束：

const undefinedRef: React.MutableRefObject<undefined> = useRef(undefined)
conse noArgRef: React.MutableRefObject<undefined> = useRef()

const nullRef: React.MutableRefObject<null> = useRef(null)

当将 ref 传递给另一个元素时，这也会产生进一步的后果：

const nullRef = useRef(null)
<div ref={nullRef} /> // this works

const undefinedRef = useRef()
<div ref={undefinedRef} /> // compiler failure!
/*
Type 'MutableRefObject<undefined>' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
  Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Types of property 'current' are incompatible.
      Type 'undefined' is not assignable to type 'HTMLDivElement | null'.ts(2322)
*/

尽管编译器失败，它仍然适用于我的用例（使用react-use中的useClickAway挂钩）

除了 TypeScript 类型之外，这有什么影响？

这是重现故障的 CodeSandbox：https://codesandbox.io/s/prod-resonance-j9yuu?file=/src/App.tsx

Answer 1

之间没有任何区别

const undefinedRef: React.MutableRefObject<undefined> = useRef(undefined)
conse noArgRef: React.MutableRefObject<undefined> = useRef()

他们都有未定义的undefinedRef.current和noArgRef.current 。

然而

const nullRef: React.MutableRefObject<null> = useRef(null)

将nullRef.current分配为 null

这将对您的代码产生的唯一影响是当您实际尝试从 current 中访问属性或尝试检查 typeof ref

例如typeof nullRef.current将是object

和一个 if 条件

if(typeof nullRef.current === "object") {
   // This will get executed only for nullRef and not for the other two refs
}

Answer 2

我相信像const ref = useRef<SomeType>(null)这样的东西会使参考只读。

请参阅TypeScript 备忘单中的此注释。

useRef 有重载，因此如果您使用类型参数 T vs T | null 结果 object 是不同的：

 refObjectToPassIntoRefProp = useRef<HTMLDivElement>(null) // @type = { current: HTMLDivElement | null } const refObjectYouMaintain = useRef<HTMLDivElement | null>(null) // @type = { current: HTMLDivElement | undefined } const refObjectYouMaintainToo = useRef<HTMLDivElement>()

首先，object 的当前属性对您（消费者）是只读的。 当指针由 React 维护时，它应该被传递给 React。 在实践中，你仍然可以改变你传递给 React 的东西的当前属性，但不建议这样做，因为 React 应该是所有者。