[React 源码] useRef [1.4k 字 – 阅读时长3min]

代码都来自 React 18 源码, 大家可以放心食用

问题 : ref 怎么实现获取 Dom 引用的? 怎么实现可以得到一个可变且不刷新页面的实例值的?

useRef 使用

useRef ref 值作为 DOM 引用

案例 1:使用 ref focus input
function App() {
  return <Counter label="Label" value="Value" isFocus />;
}

function Counter({ label, value, isFocus }) {
  const ref = React.useRef(); // (1)

  React.useEffect(() => {
    if (isFocus) {
      ref.current.focus(); // (3)
    }
  }, [isFocus]);

  return (
    <label>
      {/* (2) */}
      {label}: <input type="text" value={value} ref={ref} />
    </label>
  );
}

useRef 作为可变值:

案例 2: 判断组件是首次渲染还是重新渲染
function Counter() {
  const [count, setCount] = React.useState(0);

  function onClick() {
    setCount(count + 1);
  }

  const isFirstRender = React.useRef(true);

  React.useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
    } else {
      console.log(
        `
          I am a useEffect hook's logic
          which runs for a component's
          re-render.
        `
      );
    }
  });

  return (
    <div>
      <p>{count}</p>

      <button type="button" onClick={onClick}>
        Increase
      </button>
    </div>
  );
}
复制代码

useRef 原理

这里,我们直接进入到 reconciler 阶段,默认已经通过深度优先调度到了 Counter 函数组件的 Fiber节点


useRef mount 挂载阶段

第一:判断是函数节点的 tag 之后,调用 renderWithHooks.

/* 
workInProgress: 当前工作的 Fiber 节点
Componet:Counter 函数组件
_current: 老 Fiber 节点 也就是 workInProgress.alternate 
*/
let value = renderWithHooks(_current,workInProgress,Component);

第二:在 renderWithHooks 当中调用 Counter 函数

let children = Component();

第三: 调用 Counter 函数 的 useRef 函数

export function useRef(reducer, initialArg) {
  return ReactCurrentDispatcher.current.useRef(reducer, initialArg);
}

第四:挂载阶段 ReactCurrentDispatcher.current.useRef 实则是调用了 mountRef,

function mountRef<T>(initialValue: T): { current: T } {
  const hook = mountWorkInProgressHook();
  const ref = { current: initialValue };
  hook.memoizedState = ref;
  return ref;
}

第五:在 mountRef 中调用,mountWorkInProgressHook 函数,创建 useRefHook 对象,构建 fiber.memoizedState 也就是 Hook 链表, 创建 ref 对象,里面有 current 属性,useRefHook.memoizedState 属性 就是 该 ref 对象。 返回 ref 对象。组件当中可以通过 ref.current 拿到该初始值。

第六:reconciler 阶段执行之后,来到 render 阶段 中的 layout 阶段,在 commitLayoutEffectOnFiber当中执行 safelyAttachRef 再执行 commitAttachRef

function commitLayoutEffectOnFiber(
  finishedRoot: FiberRoot,
  current: Fiber | null,
  finishedWork: Fiber,
  committedLanes: Lanes,
): void {
     safelyAttachRef(finishedWork, finishedWork.return);
}

第七: commitAttachRef 判断 ref 挂载的类型, 原生节点,通过 fiber 节点 的 stateNode 属性获取到原生节点,将 原生 DOM 节点 赋值给 ref.current

通过第七点可以解决问题1:如何绑定 Dom 节点?

render 阶段中的 mutation 阶段 Dom 已经挂载了, layout 阶段可以 通过 Fiebr.stateNode 获取到 新的 原生 Dom 节点,useEffect 是在 render 阶段之后执行的,所以 这时候通过 ref.current 可以 获取到 原生 Dom 节点。

function commitAttachRef(finishedWork: Fiber) {
  const ref = finishedWork.ref;
  if (ref !== null) {
    const instance = finishedWork.stateNode;
    let instanceToUse;
    switch (finishedWork.tag) {
      case HostResource:
      case HostSingleton:
      case HostComponent:
        instanceToUse = getPublicInstance(instance);
        break;
      default:
        instanceToUse = instance;
    }
     ref.current = instanceToUse;
  }
}

如果之后再有 useState useReducer,最终mout阶段的成果是

image.png

自此 useRef 挂载阶段执行完毕


useRef update 更新阶段

第一:我们直接进入到 reconciler 阶段,默认已经通过深度优先更新调度到了 Counter 函数组件的 Fiber节点

第二:判断是函数节点的 tag 之后,调用 renderWithHooks.

/* 
workInProgress: 当前工作的 Fiber 节点
Componet:Counter 函数组件
_current: 老 Fiber 节点 也就是 workInProgress.alternate 
*/
let value = renderWithHooks(_current,workInProgress,Component);

第三:在 renderWithHooks 当中调用 Counter 函数

let children = Component();

第四: 调用 Counter 函数 的 useRef 函数

export function useRef(reducer, initialArg) {
  return ReactCurrentDispatcher.current.useRef(reducer, initialArg);
}

第五: 更新阶段 ReactCurrentDispatcher.current.useReducer 实则是调用了 updateRef

function updateRef<T>(initialValue: T): {current: T} {
  const hook = updateWorkInProgressHook();
  return hook.memoizedState;
}

第六:在 updateRef 中调用 updateWorkInProgressHook 函数,在此函数中最重要的就是通过 alternate 指针复用 currentFiber(老 Fiber) 的 memorizedState, 也就是 Hook 链表,并且按照严格的对应顺序来复用 currentFiber(老 Fiber) Hook 链表当中的 Hook(通过 currentHook 指针结合链表来实现),通过尽可能的复用来创建新的 Hook 对象,构建 fiber.memoizedState 也就是新的 Hook 链表。

第七: updateRef 直接将 hook.memoizedState 返回,也就是 ref 对象 ref = {current: }

通过第七点可以解决问题2:useRef 如何作为可变值?

组件当中 直接通过 ref.current = "true" 修改 ref 对象的 current 属性,current 通过对象引用的修改, 已经最新值了, 但是 React 没有像 useReducer 中 dispatch 的时候去 调用 scheduleFiberOnRoot 从根节点开始遍历,刷新页面,所以 ref.current 的值 在 UI 当中不会刷新,直至下一次 dispatch 或者 setState 才会刷新。因为函数重新执行了,又调用了 useRef -> updateRef 拿到最新值。

如果我们想让 ref.current 修改的时候页面刷新,该怎么办,笔者的想法是 通过 Object.definedProperty 中定义 settter getter ,修改的时候 调用 setter 函数, 在 setter 函数中 调用 scheduleFiebrOnRoot
再次从 根节点开始深度遍历,重新经过 scheduler reconciler render 三个大阶段就可以实现刷新页面。

自此 useRef 更新完毕


© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容