function App(){
  const [count, setCount] = useState(0)
  useEffect(() => {
    setCount(1)
  }, [])
  const handleClick = () => setCount(count => count++)
  return (
    <div>
        勇敢牛牛,        <span>不怕困難</span>
        <span onClick={handleClick}>{count}</span>
    </div>
  )
}
ReactDom.render(<App />, document.querySelector('#root'))

React.createElement("App", null)
or
jsx("App", null)

if (!root) {
    // Initial mount
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(container, forceHydrate);
    fiberRoot = root._internalRoot;
}

var update = {
    eventTime: eventTime,
    lane: lane,
    tag: UpdateState,
    payload: null,
    callback: element,
    next: null
  };

var sharedQueue = updateQueue.shared;
  var pending = sharedQueue.pending;
  if (pending === null) {   
  // mount時只有一個update，直接閉環(huán)
    update.next = update;
  } else {   
  // update時，將最新的update的next指向上一次的update， 上一次的update的next又指向最新的update形成閉環(huán)
    update.next = pending.next;
    pending.next = update;
  }
  // pending指向最新的update， 這樣我們遍歷update鏈表時， pending.next會指向第一個插入的update。
  sharedQueue.pending = update;   

function workLoopSync() {
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress);
  }
}

if (flags > PerformedWork) {
  if (returnFiber.lastEffect !== null) {
    returnFiber.lastEffect.nextEffect = completedWork;
  } else {
    returnFiber.firstEffect = completedWork;
  }
  returnFiber.lastEffect = completedWork;
}

var finishedWork = root.current.alternate;  // workInProgress fiber樹
root.finishedWork = finishedWork;  // 這里的root是fiberRoot
root.finishedLanes = lanes;
commitRoot(root);

var firstEffect;
// 判斷當前rootFiber樹是否有副作用
if (finishedWork.flags > PerformedWork) {
    // 下面代碼的目的還是為了將這個effectList鏈表形成閉環(huán)
    if (finishedWork.lastEffect !== null) {
      finishedWork.lastEffect.nextEffect = finishedWork;
      firstEffect = finishedWork.firstEffect;
    } else {
      firstEffect = finishedWork;
    }
} else {
// 這個rootFiber樹沒有副作用
firstEffect = finishedWork.firstEffect;
}

do {  // mutation之前
  invokeGuardedCallback(null, commitBeforeMutationEffects, null);
} while (nextEffect !== null);

function commitBeforeMutationEffects() {
  while (nextEffect !== null) {
    var current = nextEffect.alternate;
    // 處理DOM節(jié)點渲染/刪除后的 autoFocus、blur 邏輯；
    if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null){...}
    var flags = nextEffect.flags;
    // 調(diào)用getSnapshotBeforeUpdate，fiberRoot和ClassComponent會走這里
    if ((flags & Snapshot) !== NoFlags) {...}
    // 調(diào)度useEffect（異步）
    if ((flags & Passive) !== NoFlags) {
      // rootDoesHavePassiveEffects變量表示當前是否有副作用
      if (!rootDoesHavePassiveEffects) {
        rootDoesHavePassiveEffects = true;
        // 創(chuàng)建任務并加入任務隊列，會在layout階段之后觸發(fā)
        scheduleCallback(NormalPriority$1, function () {
          flushPassiveEffects();
          return null;
        });
      }
    }
    // 繼續(xù)遍歷下一個effect
    nextEffect = nextEffect.nextEffect;
    }
}

var newTask = {
    id: taskIdCounter++,
    callback: callback,  //上面代碼傳入的回調(diào)函數(shù)
    priorityLevel: priorityLevel,
    startTime: startTime,
    expirationTime: expirationTime,
    sortIndex: -1
};

do {    // mutation  dom渲染
  invokeGuardedCallback(null, commitMutationEffects, null, root, renderPriorityLevel);
} while (nextEffect !== null);

function commitMutationEffects(root, renderPriorityLevel) {
  // TODO: Should probably move the bulk of this function to commitWork.
  while (nextEffect !== null) {     // 遍歷EffectList
    setCurrentFiber(nextEffect);
    // 根據(jù)flags分別處理
    var flags = nextEffect.flags;
    // 根據(jù) ContentReset flags重置文字節(jié)點
    if (flags & ContentReset) {...}
    // 更新ref
    if (flags & Ref) {...}
    var primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
    switch (primaryFlags) {
      case Placement:   // 插入dom
        {...}
      case PlacementAndUpdate:    //插入dom并更新dom
        {
          // Placement
          commitPlacement(nextEffect);
          nextEffect.flags &= ~Placement; // Update
          var _current = nextEffect.alternate;
          commitWork(_current, nextEffect);
          break;
        }
      case Hydrating:     //SSR
        {...}
      case HydratingAndUpdate:      // SSR
        {...}
      case Update:      // 更新dom
        {...}
      case Deletion:    // 刪除dom
        {...}
    }
    resetCurrentFiber();
    nextEffect = nextEffect.nextEffect;
  }
}

function appendChildToContainer(container, child) {
  var parentNode;
  if (container.nodeType === COMMENT_NODE) {
    parentNode = container.parentNode;
    parentNode.insertBefore(child, container);
  } else {
    parentNode = container;
    parentNode.appendChild(child);    // 直接將整個dom作為子節(jié)點插入到root中
  }
}

root.current = finishedWork  // 將`workInProgress`fiber樹變成`current`樹

do {   // 調(diào)用生命周期和hook相關(guān)操作， 賦值ref
   invokeGuardedCallback(null, commitLayoutEffects, null, root, lanes);
} while (nextEffect !== null);

function commitLayoutEffects(root, committedLanes) {
  while (nextEffect !== null) {
    setCurrentFiber(nextEffect);
    var flags = nextEffect.flags;
    // 調(diào)用生命周期或鉤子函數(shù)
    if (flags & (Update | Callback)) {
      var current = nextEffect.alternate;
      commitLifeCycles(root, current, nextEffect);
    }
    {
      // 獲取dom實例，更新ref
      if (flags & Ref) {
        commitAttachRef(nextEffect);
      }
    }
    resetCurrentFiber();
    nextEffect = nextEffect.nextEffect;
  }
}

// 創(chuàng)建任務并加入任務隊列，會在layout階段之后觸發(fā)
scheduleCallback(NormalPriority$1, function () {
  flushPassiveEffects();
  return null;
});