非条件渲染的DOM节点Ref在首次useEffect执行时是否必定已赋值？

先给你明确结论：对于非条件渲染的DOM节点，你完全可以依赖它的ref在首次空依赖的useEffect执行时已经被赋值，ref.current不会是undefined。

为什么能确定这一点？ #

React的执行流程是固定的：

• 组件首次渲染时，先执行函数体代码，创建useRef并返回一个空的ref对象。
• 接着React渲染JSX内容，把<audio>这个DOM节点挂载到页面上，同时会把该DOM节点赋值给ref.current。
• 最后，React会触发所有空依赖的useEffect回调——这一步是在DOM完全挂载完成后才执行的，所以此时ref.current必然指向已经存在的<audio>元素。

看你给出的代码示例：

function Component() {
  const ref = React.useRef();

  React.useEffect(() => {
    // Can ref.current ever be undefined here?
    ref.current.volume = 0.4;
  }, []);

  return <audio src="..." ref={ref} />
}

在这个场景下，ref.current永远不会是undefined，直接访问ref.current.volume是绝对安全的。

那为什么很多人会加判断或可选链？ #

这其实更多是一种防御性编程的习惯：

• 怕后续代码改动时，把<audio>改成条件渲染（比如加了{showAudio && <audio ... />}），此时ref可能会变成undefined，提前加判断可以避免潜在报错。
• 团队编码规范要求对所有ref的访问都做安全检查，不管是否是条件渲染。
• 有些开发者可能没完全搞清楚React的渲染和useEffect的执行时机，所以习惯性加判断。

但回到你的原始场景——非条件渲染的DOM节点，这种判断是完全没有必要的，不会有报错的风险。

内容的提问来源于stack exchange，提问作者Tomasz Nocoń