useRef - wangshengliang

面试题：useRef 是干什么的？ref 的工作流程是怎样的？什么叫做 ref 的失控？

useRef 各个阶段#

ref 是英语 reference（引用）的缩写，在 React 中，开发者可以通过 ref 保存一个对 DOM 的引用。事实上，任何需要被引用的数据，都可以保存在 ref 上。在 React 中，出现过 3 种 ref 引用模式：

String 类型（已不推荐使用）
函数类型
{ current : T }

目前关于创建 ref，类组件推荐使用 createRef 方法，函数组件推荐使用 useRef

用法如下：

const refContainer = useRef(initialValue)

mount 阶段

mount 阶段调用的是 mountRef，对应的代码如下：

function mountRef(initialValue) {
  // 创建 hook 对象
  const hook = mountWorkInProgressHook()
  const ref = { current: initialValue }
  // hook 对象的 memoizedState 值为 { current: initialValue }
  hook.memoizedState = ref
  return ref
}

在 mount 阶段，首先调用 mountWorkInProgressHook 方法得到一个 hook 对象，该 hook 对象的 memoizedState 上面会缓存一个键为 current 的对象 { current: initialValue }，之后向外部返回该对象。

update 阶段

update 阶段调用的是 updateRef，相关代码如下：

function updateRef(initialValue) {
  // 拿到当前的 hook 对象
  const hook = updateWorkInProgressHook()
  return hook.memoizedState
}

除了 useRef 以外，createRef 也会创建相同数据结构的 ref：

function createRef() {
  const refObject = {
    current: null,
  }
  return refObject
}

ref 的工作流程#

ref 创建之后，会挂在 HostComponent 或者 ClassComponent 上面，形成 ref props，例如：

// HostComponent
<div ref={domRef}></div>
// ClassComponent
<App ref={comRef}/>

整个 ref 的工作流程分为两个阶段：

render 阶段：标记 ref flag
commit 阶段：根据所标记的 ref flag，执行 ref 相关的操作

上图中，markRef 表示的就是标记 ref，相关代码如下：

function markRef(current, workInProgress) {
  const ref = workInProgress.ref
  if (
    (current === null && ref !== null) ||
    (current !== null && current.ref !== ref)
  ) {
    // 标记 Reg tag
    workInProgress.flags != Ref
  }
}

有两种情况会标记 ref：

mount 阶段并且 ref props 不为空
update 阶段并且 ref props 发生了变化

标记完 ref 之后，来到了 commit 阶段，会在 mutation 子阶段执行 ref 的删除操作，删除旧的 ref：

function commitMutationOnEffectOnFiber(finishedWork, root) {
  // ...
  if (flags & Ref) {
    const current = finishedWork.alternate
    if (current !== null) {
      // 移除旧的 ref
      commitDetachRef(current)
    }
  }
  // ...
}

上面的代码中，commitDetachRef 方法要做的事情就是移除旧的 ref，相关代码如下：

function commitDetachRef(current) {
  const currentRef = current.ref

  if (currentRef !== null) {
    if (typeof currentRef === 'function') {
      // 函数类型 ref，执行并传入 null 作为参数
      currentRef(null)
    } else {
      // { current: T } 类型的 ref，重置 current 指向
      currentRef.current = null
    }
  }
}

删除完成后，会在 Layout 子阶段重新赋值新的 ref，相关代码如下：

function commitLayoutEffectOnFiber(
  finishedRoot,
  current,
  finishedWork,
  committedLanes
) {
  // 省略代码
  if (finishedWork.flags & Ref) {
    commitAttachRef(finishedWork)
  }
}

对应的方法 commitAttachRef 就是用来重新赋值新 ref 的，相关代码如下：

function commitAttachRef(finishedWork) {
  const ref = finishedWork.ref
  if (ref !== null) {
    const instance = finishedWork.stateNode
    let instanceToUse
    switch (finishedWork.tag) {
      case HostComponent:
        // HostComponent 需要获取对应的 DOM 元素
        instanceToUse = getPublicInstance(instance)
        break
      default:
        // ClassComponent 使用 FiberNode.stateNode 保存实例
        instanceToUse = instance
    }

    if (typeof ref === 'function') {
      // 函数类型，执行函数并将实例传入
      let retVal
      retVal = ref(instanceToUse)
    } else {
      // { current: T } 类型则更新 current 指向
      ref.current = instanceToUse
    }
  }
}

ref 的失控#

当我们使用 ref 保存对 DOM 的引用时，那么就有可能会造成 ref 的失控。

所谓 ref 的失控，开发者通过 ref 操作了 DOM，但是这一行为本来应该是由 React 接管的，两者产生了冲突，这种冲突我们就称之为 ref 的失控。

考虑下面这一段代码：

function App() {
  const inputRef = useRef(null)

  useEffect(() => {
    // 操作1
    inputRef.current.focus()

    // 操作2
    inputRef.current.getBoundingClientRect()

    // 操作3
    inputRef.current.style.width = '500px'
  }, [])

  return <input ref={inputRef} />
}

在上面的三个操作中，第三个操作是不推荐的。

React 作为一个视图层框架，接管了大部分和视图相关的操作，这样开发者可以专注于业务上面的开发逻辑。

上面的三个操作中，前面两个并没有被 React 接管，所以当产生这样的操作时，可以百分百确定是来自于开发者的操作。但是在操作三中，并不能确定该操作究竟是 React 的行为还是开发者的行为，甚至两者会产生冲突。

例如我们再聚一个例子：

function App() {
  const [isShow, setShow] = useState(true)
  const ref = useRef(null)

  return (
    <div>
      <button onClick={() => setShow(!isShow)}>React操作DOM</button>
      <button onClick={() => ref.current.remove()}>开发者DOM</button>
      {isShow && <p ref={ref}>Hello</p>}
    </div>
  )
}

上面的代码就是一个典型的 ref 失控的案例。第一个按钮通过 isShow 来控制 p 是否显示，这是 React 的行为，第二个按钮通过 ref 直接拿到了 p 的 DOM 对象，然后进行显隐操作，两者会产生冲突，上面的两个按钮，先点击任意一个，然后再点击另外一个就会报错。

ref 失控的防治#

ref 失控的本质：由于开发者通过 ref 操作了 DOM，而这一行为本来应该是由 React 来进行接管的，两者之间发生了冲突而导致的。

因此我们可以从下面两个方面来进行防治：

防：控制 ref 失控的影响范围，使 ref 的失控更加容易被定位
治：从 ref 引用的数据结构入手，尽力避免可能引起的失控操作

防

在上一章我们介绍过高阶组件，在高阶组件内部是无法将 ref 直接指向 DOM 的，我们需要进行 ref 的转发。可以通过 forwardRef API 进行一个 ref 的转发，将 ref 转发的这个操作，实际上就将 ref 失控的范围控制在了单个组件内，不会出现跨越组件的 ref 失控。

因为是手动的进行 ref 的转发，所以发生 ref 失控的时候，能够更加容易的进行错误的定位

治

之前我们介绍过 useImperativeHandle 这个 Hook，它可以在使用 ref 时向父组件传递自定义的引用值：

const MyInput = forwardRef((props, ref) => {
  const realInputRef = useRef(null)
  useImperativeHandle(ref, () => ({
    focus() {
      realInputRef.current.focus()
    },
  }))
  return <input {...props} ref={realInputRef} />
})

在上面的代码中，我们通过 useImperativeHandle 来定制 ref 所引用的内容，那么在外部开发者通过 ref 只能拿到：

{
  focus(){
      realInputRef.current.focus();
  }
}

真题解答#

题目：useRef 是干什么的？ref 的工作流程是怎样的？什么叫做 ref 的失控？
参考答案：
useRef 的主要作用就是用来创建 ref 保存对 DOM 元素的引用。在 React 发展过程中，出现过三种 ref 相关的引用模式：

String 类型（已不推荐使用）

函数类型

{ current : T }

目前最为推荐的是在类组件中使用 createRef，函数组件中使用 useRef 来创建 Ref。
当开发者调用 useRef 来创建 ref 时，在 mount 阶段，会创建一个 hook 对象，该 hook 对象的 memoizedState 存储的是 { current: initialValue } 对象，之后向外部返回了这个对象。在 update 阶段就是从 hook 对象的 memoizedState 拿到 { current: initialValue } 对象。
ref 内部的工作流程整体上可以分为两个阶段：

render 阶段：标记 Ref flag，对应的内部函数为 markRef

commit 阶段：根据 Ref flag，执行 ref 相关的操作，对应的相关函数有 commitDetachRef、commitAttachRef

所谓 ref 的失控，本质是由于开发者通过 ref 操作了 DOM，而这一行为本身是应该由 React 来进行接管的，所以两者之间发生了冲突导致的。
ref 失控的防治主要体现在两个方面：

防：控制 ref 失控影像的范围，使 ref 失控造成的影响更容易被定位，例如使用 forwardRef

治：从 ref 引用的数据结构入手，尽力避免可能引起失控的操作，例如使用 useImperativeHandle