React DOM controlled component

一、作用

二、排队恢复状态

export function enqueueStateRestore(target: Node): void {
  if (restoreTarget) {
    if (restoreQueue) {
      restoreQueue.push(target);
    } else {
      restoreQueue = [target];
    }
  } else {
    restoreTarget = target;
  }
}

三、需要状态恢复

export function needsStateRestore(): boolean {
  return restoreTarget !== null || restoreQueue !== null;
}

四、如有需要则恢复状态

export function restoreStateIfNeeded() {
  if (!restoreTarget) {
    return;
  }
  const target = restoreTarget;
  const queuedTargets = restoreQueue;
  restoreTarget = null;
  restoreQueue = null;

  restoreStateOfTarget(target);
  if (queuedTargets) {
    for (let i = 0; i < queuedTargets.length; i++) {
      restoreStateOfTarget(queuedTargets[i]);
    }
  }
}

五、变量

1. 恢复目标

// Use to restore controlled state after a change event has fired.
// 在触发更改事件后用于恢复受控状态。

let restoreTarget = null;
let restoreQueue = null;

六、工具

1. 恢复目标状态

备注

• getInstanceFromNode() 由 ReactDOMComponentTree#getInstanceFromNode 实现
• getFiberCurrentPropsFromNode() 由 ReactDOMComponentTree#getFiberCurrentPropsFromNode 实现
• restoreControlledState() 由 ReactDOMComponent#restoreControlledState 实现

function restoreStateOfTarget(target: Node) {
  // We perform this translation at the end of the event loop so that we
  // always receive the correct fiber here
  // 我们在事件循环结束时执行此转换，以便我们总是能够在这里获取到正确的 fiber
  const internalInstance = getInstanceFromNode(target);
  if (!internalInstance) {
    // Unmounted
    // 卸载
    return;
  }

  const stateNode = internalInstance.stateNode;
  // Guard against Fiber being unmounted.
  // 防止 Fiber 被卸载。
  if (stateNode) {
    const props = getFiberCurrentPropsFromNode(stateNode);
    restoreControlledState(
      internalInstance.stateNode,
      internalInstance.type,
      props,
    );
  }
}