import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

React实现useRef通过基本概念、原理来介绍。useRef 的基本概念、数据共享层、hooks 的相关知识，阐述useRef 在 mount 和 update 阶段的操作，以及整个 react 的执行流程，包括 render 阶段和 commit 阶段，并介绍了标记和执行 ref 操作的过程。

• 基本概念：useRef 用于获取当前元素属性，有两种定义方式，返回包含 current 属性的对象。
• 数据共享层：hook 架构有内部数据共享层，通过 currentDispatcher.current 处理不同阶段调用。
• hooks 相关：hooks 是函数组件和 fiber 节点沟通的纽带不同阶段的 fiber 节点有不同处理函数，还解决了确定 fiber 对应的 hook 上下文、hook 的存在位置、多个 hook 处理等问题。
• useRef 原理：通过 useRef 函数创建并返回对象，渲染流程中获取 dom 实例，在 render 阶段标记 ref ，commit 阶段挂载 dom 节点时操作 ref 。
• mount 阶段：构建 hook 对象并添加到 fiber 节点的 hook 链表，创建保存数据的 current 对象。
• update 阶段：通过双缓存树机制更新 hook 对象。
• 执行流程：render 阶段构建新的 fiber 树，commit 阶段依据 workInProgress 树中的变化节点完成 DOM 操作，包括 Before mutation 、mutation 、layout 三个阶段。标记 ref 在 beginWork 阶段，执行在 commit 阶段的 mutation 和 layout 阶段。