在useLayoutEffect中使用ref时，是否需要检查ref.current是否已赋值？

在你给出的组件代码里，useLayoutEffect执行时ref已经被正确赋值了，所以那个if (ref.current)的判断完全没必要。

原因要从React的首次渲染流程说起：

• 首先执行组件函数，创建ref并初始化为null，返回绑定了该ref的<div>。
• React会先完成DOM节点的创建，然后立刻把这个DOM节点赋值给ref.current。
• 紧接着就会同步执行useLayoutEffect钩子（这个阶段DOM已经更新，但还没被浏览器绘制到屏幕上）。

所以在这个无条件渲染<div>的场景下，ref.current在useLayoutEffect里必然存在，直接使用就行。

当然也有需要判断的特殊情况：如果ref绑定的元素是条件渲染的（比如return isShow && <div ref={ref}></div>），那当条件不满足时元素不会被创建，ref.current还是null，这时候加判断就很有必要。

内容的提问来源于stack exchange，提问作者Saad Farooq