IWSR

  import { useRef } from "react";

  function UseRef() {
    const ref1 = useRef(null);
    const ref2 = useRef({
      a: 1,
    });

    const handleClick = () => {
      ref2.current = {
        a: 3
      }
    }

    return (
      <div id="refTest" ref={ref1} onClick = {handleClick}>123</div>
    )
  }

  export default UseRef;

function mountRef<T>(initialValue: T): {|current: T|} {
  // hooksリストの内容を使用してhookオブジェクトを作成し、hooksリストにマウントします
  const hook = mountWorkInProgressHook();   
  if (enableUseRefAccessWarning) {
    const ref = {current: initialValue};
    hook.memoizedState = ref;
    return ref;
  } else {
    // 初期値を保存するオブジェクトを作成し、初期値はuseRef内で渡された引数です
    const ref = {current: initialValue};
    // そのオブジェクトをhookオブジェクトのmemoizedState属性に保存します
    hook.memoizedState = ref;
    return ref;
  }
}

function updateRef<T>(initialValue: T): {|current: T|} {
  // updateWorkInProgressHookはcurrentツリー上の対応するhookオブジェクトに基づいて
  // 新しいhookオブジェクトを作成し、refの参照アドレス（memoizedStateに保存）も新しいhookのmemoizedStateに割り当てられます
  const hook = updateWorkInProgressHook();
  return hook.memoizedState;
}

  {
    // このタグはこれをReact要素として一意に識別することを可能にします
    $$typeof: REACT_ELEMENT_TYPE,

    // 要素に属する組み込みプロパティ
    type: type,
    key: key,
    ref: ref,
    props: props,

    // この要素を作成する責任のあるコンポーネントを記録します。
    _owner: owner,
  };

  /**
   * 不要なコードを多く削除しました
  */
  function mountIndeterminateComponent(...) {
    ...
    /**
     * renderWithHooksはUseRef内のreturnの結果を返します
     * つまり、このfunction componentが返すReactElementです
     * */
    value = renderWithHooks(...)
    ...
    /**
     * reconcileChildrenはReactElementを渡し、diffとfiberを生成します
    */
    reconcileChildren(null, workInProgress, value, renderLanes);
  }
  
  function renderWithHooks(...) {
    ...
    let children = Component(props, secondArg);
    ...
    return children;
  }

function markRef(current: Fiber | null, workInProgress: Fiber) {
  // ここでのrefは例内のref1です
  const ref = workInProgress.ref;
  /**
   * 次の2つの条件のいずれかが満たされると、実行体に入ります
   * 1. 初回更新時、refがnullでない
   * 2. 非初回更新時、WIP上のrefとcurrent上のrefが異なる、つまり変更が発生した
  */
  if (
    (current === null && ref !== null) ||
    (current !== null && current.ref !== ref)
  ) {
    // Ref効果をスケジュールします
    /**
     * ビット操作を使用してWIPのflagsにRefをマークし、更新が発生したことを示します
    */
    workInProgress.flags |= Ref;
    if (enableSuspenseLayoutEffectSemantics) {
      workInProgress.flags |= RefStatic;
    }
  }
}

  import React from "react";

  class UseRef extends React.Component {
    constructor(props) {
      super(props);
      this.myRef = React.createRef();
    }

    componentDidMount() {
      console.log(this.myRef);
    }

    render() {
      return <div ref={this.myRef} />;
    }
  }

  export default UseRef;

  function commitLayoutEffectOnFiber(...) {
    ...
    if (!enableSuspenseLayoutEffectSemantics || !offscreenSubtreeWasHidden) {
      if (enableScopeAPI) {
        // TODO: これは一時的な解決策で、wwwでReact Flareから移行することを可能にしました。
        /**
         * finishedWork.flags & Ref
         * &演算子は特徴を含むかどうかを示すことができ、特徴が含まれない場合、結果は0になります。
         * 例えば、0110はすべての特徴を持ち、0010は特定の特徴を示します。
         * 0110が0010という特徴を持っているかどうかを判断するには、0110 & 0010を実行し、結果が0010になります。
         * 結果が0でない場合、0110は0010を含んでいると判断できます。
        */
        if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
          commitAttachRef(finishedWork);
        }
      } else {
        if (finishedWork.flags & Ref) {
          commitAttachRef(finishedWork);
        }
      }
    }
    ...
  }

  function commitAttachRef(finishedWork: Fiber) {
  const ref = finishedWork.ref; // fiber上のref、現在ref.currentはnullです
  if (ref !== null) {
    const instance = finishedWork.stateNode; // stateNodeにはDOMオブジェクトが保存されています
    let instanceToUse;
    switch (finishedWork.tag) {
      case HostComponent:
        instanceToUse = getPublicInstance(instance);
        break;
      default:
        instanceToUse = instance;
    }

    ...

    if (typeof ref === 'function') {
      let retVal;
      ...
      retVal = ref(instanceToUse); // refsはコールバックでも可能です。。。
    } else {
      ref.current = instanceToUse; // ここがDOMをバインドするロジックで、割り当て後はrefsのDOMが最新であることが保証されます。
    }
  }
}