摘要：現(xiàn)在看了源碼之后，發(fā)現(xiàn)自己還是，根本就不是這么做的，我還花了很多時(shí)間去找他阻止默認(rèn)行為的證據(jù)，結(jié)果才發(fā)現(xiàn)走了歪路。

不知道大家對于Controlled Input的概念好不好奇，我在最開始用React的時(shí)候就對其非常感興趣，然而奈何那時(shí)候能力不夠，也沒那么多時(shí)間去看源碼，所以一直處于猜測而沒有去證實(shí)的階段。在后來使用Vue進(jìn)行開發(fā)的時(shí)候，我還自己實(shí)現(xiàn)過類似的組件，那時(shí)候是通過preventDefault keyDown事件來阻止自動(dòng)更新，實(shí)現(xiàn)了大致的功能，所以當(dāng)時(shí)覺得這可能也是React的做法吧?，F(xiàn)在看了源碼之后，發(fā)現(xiàn)自己還是too young，React根本就不是這么做的，我還花了很多時(shí)間去找他阻止默認(rèn)行為的證據(jù)，結(jié)果才發(fā)現(xiàn)走了歪路。閑話到此為止，我們來看看React中如何實(shí)現(xiàn)Controlled Input

在看這個(gè)之前最好了解過React的事件系統(tǒng)，相關(guān)內(nèi)容我已經(jīng)準(zhǔn)備好，但是還沒整理成文章，大家可以先去自行了解下，我更新上來之后會(huì)在這里放鏈接，所以也可以關(guān)注我獲取最新內(nèi)容。

先來看一下batchedUpdates的代碼：

function batchedUpdates(fn, bookkeeping) {
  if (isBatching) {
    return fn(bookkeeping);
  }
  isBatching = true;
  try {
    return _batchedUpdates(fn, bookkeeping);
  } finally {
    isBatching = false;
    var controlledComponentsHavePendingUpdates = needsStateRestore();
    if (controlledComponentsHavePendingUpdates) {
      _flushInteractiveUpdates();
      restoreStateIfNeeded();
    }
  }
}

在finally里面執(zhí)行了一個(gè)方法叫做restoreStateIfNeeded，如果你通過代碼調(diào)試把debugger放之前，并且你寫一個(gè)不更新state的demo，你會(huì)發(fā)現(xiàn)，在執(zhí)行這個(gè)方法之前，input里面的內(nèi)容其實(shí)是先變了的，然后執(zhí)行完之后再變回來。哈哈，現(xiàn)在你應(yīng)該能大致猜到了吧，是的，React的做法并不關(guān)心event，他等內(nèi)容執(zhí)行完了，然后看是否需要回滾再滾回來。

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

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

這里涉及兩個(gè)公共變量：restoreTarget和restoreQueue，那么這兩個(gè)變量會(huì)在什么情況下變化呢？

在同一個(gè)文件ReactControlledComponent里面有這么一個(gè)方法

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

那么這個(gè)方法什么時(shí)候調(diào)用呢？答案是在ChangeEventPlugin里面

ChangeEventPlugin = {
  extractEvents() {
    // ...
    const event = createAndAccumulateChangeEvent(
      inst,
      nativeEvent,
      nativeEventTarget,
    );
  }
}

function createAndAccumulateChangeEvent(inst, nativeEvent, target) {
  const event = SyntheticEvent.getPooled(
    eventTypes.change,
    inst,
    nativeEvent,
    target,
  );
  event.type = "change";
  // Flag this event loop as needing state restore.
  enqueueStateRestore(target);  // 這里
  accumulateTwoPhaseDispatches(event);
  return event;
}

我們先不關(guān)心這里具體是什么含義，我們只需要知道只有change event才需要回滾內(nèi)容，所以在生成change事件的時(shí)候會(huì)把對應(yīng)的節(jié)點(diǎn)。而生成事件的時(shí)間和batchUpdates是一起的，這就把整個(gè)內(nèi)容串聯(lián)起來了

inpute content -> trigger change event -> create event object -> enqueueStateRestore -> events trigger finsihed -> restoreStateIfNeeded

function restoreStateOfTarget(target) {
  var internalInstance = getInstanceFromNode(target);
  if (!internalInstance) {
    // Unmounted
    return;
  }
  var props = getFiberCurrentPropsFromNode(internalInstance.stateNode);
  fiberHostComponent.restoreControlledState(internalInstance.stateNode, internalInstance.type, props);
}

在事件系統(tǒng)執(zhí)行完之后，獲取input節(jié)點(diǎn)對應(yīng)的Fiber對象，然后讀取新的props，這里的props是執(zhí)行完綁定事件之后的最新的props，這是對應(yīng)controlled component真正應(yīng)該顯示的props，然后再去對比props里面的內(nèi)容和輸入框內(nèi)的實(shí)際內(nèi)容，如果需要退回就執(zhí)行。

function restoreControlledState(domElement, tag, props) {
  switch (tag) {
    case "input":
      restoreControlledState(domElement, props);
      return;
    case "textarea":
      restoreControlledState$3(domElement, props);
      return;
    case "select":
      restoreControlledState$2(domElement, props);
      return;
  }
}

function restoreControlledState(element, props) {
  var node = element;
  updateWrapper(node, props);
  updateNamedCousins(node, props);
}

function updateWrapper(element, props) {
  var node = element;

  updateChecked(element, props);

  var value = getSafeValue(props.value);

  // 更新的重點(diǎn)在這里
  if (value != null) {
    if (props.type === "number") {
      if (value === 0 && node.value === "" ||
      // eslint-disable-next-line
      node.value != value) {
        node.value = "" + value;
      }
    } else if (node.value !== "" + value) {
      node.value = "" + value;
    }
  }

  if (props.hasOwnProperty("value")) {
    setDefaultValue(node, props.type, value);
  } else if (props.hasOwnProperty("defaultValue")) {
    setDefaultValue(node, props.type, getSafeValue(props.defaultValue));
  }

  if (props.checked == null && props.defaultChecked != null) {
    node.defaultChecked = !!props.defaultChecked;
  }
}

后面具體更新的細(xì)節(jié)就不分析了，相信大家都看的懂（可以忽略一些不重要的函數(shù)）