javascript - useRef 中传入 null 和 undefined 的区别

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)
*/

尽管编译器失败，它仍然适用于我的用例(使用 useClickAway 中的 react-use Hook )

除了 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分配为空

这将对您的代码产生的唯一影响是当您实际尝试从 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
}