useRef 中传入 null 和 undefined 的区别答案

【问题标题】：Difference between passing in null and undefined in useRefuseRef 中传入 null 和 undefined 的区别
【发布时间】：2020-08-21 09:52:05
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs typescript react-hooks

【解决方案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
}

【讨论】：

我用更多上下文更新了我的原始帖子。 useRef() 和 useRef(null) 都在运行时工作（对于我的用例），但它们有不同的编译器结果。您对此有何见解？
令人惊讶的是，我没有看到任何编译器错误。你使用服务器端渲染吗？
我使用客户端渲染。有关重现问题的 CodeSandbox，请参阅我的原始帖子。

【解决方案2】：

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

见this note from TypeScript cheatsheet。

useRef 有重载，如果你使用类型参数 T vs T | null 结果对象不同：
refObjectToPassIntoRefProp = useRef<HTMLDivElement>(null) // @type = {
current: HTMLDivElement | null } const refObjectYouMaintain =
useRef<HTMLDivElement | null>(null) // @type = { current:
HTMLDivElement | undefined } const refObjectYouMaintainToo =
useRef<HTMLDivElement>()
与第一个，对象的当前属性是只读的你，消费者。它应该作为指针传递给 React 由 React 维护。在实践中，你仍然可以改变当前的你传递给 React 的东西的属性，但不推荐作为 React 应该是所有者。

【讨论】：