为什么在 React 示例中使用 null 初始化 useRef？答案

【问题标题】：Why is useRef initialized with null in React examples?为什么在 React 示例中使用 null 初始化 useRef？
【发布时间】：2020-07-30 08:32:50
【问题描述】：

在official React docs 和~我看到的所有例子中useRef 都是这样使用的：

const ref = useRef(null);

我发现它可以在不传递任何参数的情况下工作。显式传递null的目的是什么？

【问题讨论】：

【解决方案1】：

“null”是ref.current的值

如果你不传递任何参数，

ref.current=undefined

查看源代码：

   function useRef<T = undefined>(): MutableRefObject<T | undefined>;

如果不传arg，默认设置为undefined

避免使用 undefined，因为 undefined 不能被序列化。

【讨论】：

【解决方案2】：

useRef Hook 是一个函数，它返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数 (initialValue)。返回的对象将在组件的整个生命周期内持续存在。

但是，在函数返回并呈现内容之前，不会设置 ref。

所以 ref 被声明为 null 因为没有组件被加载或渲染在屏幕上并且在渲染之前声明值会出错。

【讨论】：

"在渲染之前声明值会出错" 这对我来说没有意义。渲染前undefined 有什么问题？
例如，我正在为我的 div 元素创建新的 ref。所以首先当页面加载时，render 方法最后会被调用。所以在调用render 方法之前，会发生ref 初始化，如果你已经将div 的引用传递给ref，那么这是错误的，因为div 没有在屏幕上呈现然而，你指的是它。
我明白它是如何工作的，我没有明确使用null 的好处。为什么不让它未定义呢？无论哪种方式，您都应该在使用之前检查是否设置了 ref：if (ref.current !== null) {...}。