// 相对于entry 文件的路径 -> 相对于根目录的路径
const makeSrcPath = (fileName, moduleSrc) => {
  const dirName = path.join(path.dirname(fileName), moduleSrc);
  return `./${dirName}`;
};

const moduleAnalysis = (fileName) => {
  const content = fs.readFileSync(fileName, "utf-8");
  const ast = parser.parse(content, {
    // parse in strict mode and allow module declarations
    sourceType: "module",
  });
  const dependencies = {};
  traverse(ast, {
    ImportDeclaration({ node }) {
      const moduleSrc = node.source.value;
      const path = makeSrcPath(fileName, moduleSrc);
      dependencies[moduleSrc] = path;
    },
  });
  const { code } = babel.transformFromAst(ast, null);
  return {
    fileName,
    dependencies,
    code,
  };
};

// {
//   相对于entry 文件的路径:  相对于根目录的路径
// }

dependencies =  {
  './hello.js': './src/hello.js',
  './console.js': './src/console.js'
}

 const generateDependenciesGraph = (entry) => {
  const entryModule = moduleAnalysis(entry);
  console.log(entryModule);
  // 构造队列，处理广度优先遍历
  const queue = [entryModule];
  const ret = {
    [entry]: {
      dependencies: entryModule.dependencies,
      code: entryModule.code,
    },
  };

  while (queue.length) {
    const item = queue.shift();

    const { dependencies } = item;
    if (dependencies) {
      for (const [k, v] of Object.entries(dependencies)) {
       // 如果不在dependencies result中
        if (!ret[v]) {
          const res = moduleAnalysis(v);
          // 把依赖推入queue
          queue.push(res);
          const { dependencies, code } = res;
          ret[v] = {
            dependencies,
            code,
          };
        }
      }
    }
  }
  return ret;
};

{
  "./src/index.js": {
    dependencies: {
      "./hello.js": "./src/hello.js",
      "./console.js": "./src/console.js",
    },
    code:
      '"use strict";\n\nvar _hello = _interopRequireDefault(require("./hello.js"));\n\nvar _console = require("./console.js");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\ndocument.getElementById("root").innerText = _hello.default;\n(0, _console.log)(_hello.default);',
  },
  "./src/hello.js": {
    dependencies: { "./world.js": "./src/world.js" },
    code:
      '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports.default = void 0;\n\nvar _world = _interopRequireDefault(require("./world.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nconst hello = `Hello. ${_world.default}`;\nvar _default = hello;\nexports.default = _default;',
  },
  "./src/console.js": {
    dependencies: {},
    code:
      '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports.log = void 0;\n\nconst log = (...props) => console.log(...props);\n\nexports.log = log;',
  },
  "./src/world.js": {
    dependencies: {},
    code:
      '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports.default = void 0;\nconst world = "A brave new world";\nvar _default = world;\nexports.default = _default;',
  },
}

var _hello = _interopRequireDefault(require("./hello.js"));
var _console = require("./console.js");
function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}
document.getElementById("root").innerText = _hello.default;
(0, _console.log)(_hello.default);

const generateCode = (entry) => {
  const modules = JSON.stringify(generateDependenciesGraph(entry));
  return `
    (
      function(modules) {
        function _bundler_require_(module) {
          function _relative_require_(relativePath) {
            return _bundler_require_(modules[module].dependencies[relativePath])
          }

          var exports = {};
          (
            function(require, exports, code) {
              eval(code)
            }
          )(_relative_require_, exports, modules[module].code)

          return exports
        }

        _bundler_require_('${entry}')
      }
    )(${modules})
  `;
};

 fs.writeFile("./dist/bundle.js", generateCode("./src/index.js"), (error) => {
  console.error(error);
});

function createStore(reducer, preloadedState, enhancer) {
  // 删除了一些参数矫正的代码

  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }
    // store enhancer的使用，也就是使用传入的中间件
    // enhancer就是后续会提到的applyMiddleware函数
    return enhancer(createStore)(reducer, preloadedState)
  }


  let currentReducer = reducer
  let currentState = preloadedState
  let currentListeners = []
  let nextListeners = currentListeners
  let isDispatching = false

  // 这个方法用于保持nextListeners和currentListeners的同步
  // nextListeners 是从currentListeners浅拷贝来的。
  // 订阅的时候是操作nextListeners, 防止在dispatch的时候执行subscribe/unsubscribe带来的bug
  // 在dispatch 的时候会同步 currentListeners 和 nextListeners （currentListeners = nextListeners）
  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }

  // 获取当前currentState
  function getState() {
    if (isDispatching) {
      throw new Error(
        'You may not call store.getState() while the reducer is executing. ' +
          'The reducer has already received the state as an argument. ' +
          'Pass it down from the top reducer instead of reading it from the store.'
      )
    }

    return currentState
  }

  // 订阅一个listener，是操作在nextListeners上的
  // 返回的是一个函数，用于删除这个订阅的listener，也是在nextListeners上操作的
  // 删除订阅不会在当前的dispatch中生效，而是会在下一次dispatch的时候生效
  function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected the listener to be a function.')
    }

    if (isDispatching) {
      throw new Error(
        'You may not call store.subscribe() while the reducer is executing. ' +
          'If you would like to be notified after the store has been updated, subscribe from a ' +
          'component and invoke store.getState() in the callback to access the latest state. ' +
          'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
      )
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      if (isDispatching) {
        throw new Error(
          'You may not unsubscribe from a store listener while the reducer is executing. ' +
            'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
        )
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
      currentListeners = null
    }
  }

 
   // 触发action
   // 1. 执行reducer，更新state
   // 2. 执行订阅的listener
   // 返回的是传入的action， 用于调试记录
  function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
          'Use custom middleware for async actions.'
      )
    }

    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
          'Have you misspelled a constant?'
      )
    }

    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }

  // 替换当前的reducer
  function replaceReducer(nextReducer) {
    if (typeof nextReducer !== 'function') {
      throw new Error('Expected the nextReducer to be a function.')
    }

    currentReducer = nextReducer
    // 触发一个内部的REPLACE action
    dispatch({ type: ActionTypes.REPLACE })
  }

  // 用于 observable/reactive libraries
  function observable() {
    const outerSubscribe = subscribe
    return {
      subscribe(observer) {
        if (typeof observer !== 'object' || observer === null) {
          throw new TypeError('Expected the observer to be an object.')
        }

        function observeState() {
          if (observer.next) {
            observer.next(getState())
          }
        }

        observeState()
        const unsubscribe = outerSubscribe(observeState)
        return { unsubscribe }
      },

      [$$observable]() {
        return this
      }
    }
  }

  // 触发一个INIT action,用于创建初始state树
  dispatch({ type: ActionTypes.INIT })

  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }
}

function applyMiddleware(...middlewares) {
  // 返回的函数就是在createStore中调用的那个enhancer
  return (createStore) => (...args) => {
    // 创建store， 可以获取dispatch和getState
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
          'Other middleware would not be applied to this dispatch.'
      )
    }
    
    // 封装传入中间件的api
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args),
    }
    // 给中间件们绑定能dispatch和getState的api
    const chain = middlewares.map((middleware) => middleware(middlewareAPI))

    // 从这里就可以看出middleware就是来加强dispatch的，在dispatch了一个action后搞点事情
    // compose的本质就是用于串联执行中间件
    // 这个dispatch也重写个middlewareAPI调用的dispatch
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch,
    }
  }
}

 const compose =(...middlewares) =>  middlewares.reduce((f1, f2) => (...args) => f1(f2(...args)))

({ dispatch, getState }) => (next) => (action) => {
   // 搞点事情
   const state =  next(action)
   // 搞点事情
   return state
  }

const compose = middlewares.reduce((f1, f2) => (...args) => f1(f2(...args)))
// compose好后传入middleware 1 的next就是middleware 2， 传入middleware 2 的next就是middleware3
// 而middleware 3 的next就是调用compose后的传入的原始dispatch
const dispatch = compose((action) => {
  console.log('origin dispatch', action)
})
// 最终执行绑定好后的dispatch，就相当于最终执行每个middleware，每个middleware会传递action参数给原始的dispatch
// redux-thunk 的核心原理就是：检测到传入的action如果是函数类型，就执行这个函数
dispatch({ a: 3 })
// log 如下
middleware 1
middleware 2
middleware 3
origin dispatch {a: 3}
middleware 3 after
middleware 2 after
middleware 1 after

combineReducers(reducers) {
  const reducerKeys = Object.keys(reducers)
  const finalReducers = {}
  // 收集所有传入的 reducer 函数
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]
    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }
  const finalReducerKeys = Object.keys(finalReducers)

  // 在 dispatch 时会执行 combination 函数，
  // 遍历执行所有 reducer 函数。如果某个 reducer 函数返回了新的 state，就标记hasChanged为true，
  // 所有的 reducer 函数都会被执行一遍
  // hasChanged ? 返回新的state : 返回原来的state
  
  return function combination(state = {}, action) {

    let hasChanged = false
    const nextState = {}
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i]
      const reducer = finalReducers[key]
      const previousStateForKey = state[key]
      const nextStateForKey = reducer(previousStateForKey, action)
      if (typeof nextStateForKey === 'undefined') {
        const errorMessage = getUndefinedStateErrorMessage(key, action)
        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    hasChanged =
      hasChanged || finalReducerKeys.length !== Object.keys(state).length
    return hasChanged ? nextState : state
  }
}

function autorun (fn) { 
   // 依赖收集的准备工作
   fn() // 触发observable属性的get方法
   // 清理依赖收集
}

// test.js:
export const one = function (value) {
  console.log("this is one");
  return value
};
export const two = function (value) {
  console.log("this is two");
  return value;
};

// index.js
import { one, two } from "./test";
console.log(two("test"));

// test-one.js
window.testOne = () => {
  console.log("this is window test one")
}

export const anotherTest = () => {
  console.log("another test")
}

// test.js
import { anotherTest } from "./test-one.js";

export const one = function (value) {
  console.log("this is one");
  return value;
};
export const two = function (value) {
  console.log("this is two");
  return value;
};

// index.js
import { one, two } from "./test";
console.log(two("test"))

"sideEffects":["./src/global.config.js"]

 // global.js
window.NativeBridge = {
  share: () => {
    console.log("this is native share")
  }
}

import { one, two } from "./test";
import "./global.js"

console.log(two("test"));

"sideEffects":["./src/global.js"]

  // test.js
import { isDate } from "lodash-es"

export const one = function (value) {
  console.log("this is one");
  return isDate(value);
};

export const two = function (value) {
  console.log("this is two");
  return value;
};

// index.js
import { one, two } from "./test";
import "./global.js"

console.log(two("test"));

export const one = function (value, isDate ) {
  console.log("this is one");
  return isDate(value);
};

__webpack_require__.e(/*! import() */ 0)
.then(__webpack_require__.bind(null, /*! ./async */ "./src/async.js"))

async () => {
    const res = await import("./async");
    console.log(res.default());
}

async () => {
  const res = await __webpack_require__.e(/*! import() */ 0)
  .then(__webpack_require__.bind(null, /*! ./async */ "./src/    
           async.js"));
    console.log(res.default());
}

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <span>{this.state.count}</span>;
  }
}

// 编译后
class Demo {
...
  render() {
    return React.createElement("span", null, this.state.count);
  }
}

{
  $$typeof: Symbol(react.element),
  type: 'span',
  key:null
  props: {
      children: 0
  }
}

 {
    type: React.createElement 对应的type，表明这个fiber 节点对应的element
    tag: 表明fiber 的类型
    pendingProps: 已经是被更新的props，需要被运用到子组件或者dom 元素上
    key: 对应prop 上的key
    stateNode:  dom节点(HostComponent) / 类组件的实例 (ClassComponent) / fn() (FunctionComponent) 
    nextEffect:  指向下一个**effect list**中的节点 （effect list：一个workInProgress（finishedWork）的子树，是在render阶段 最终需要决定被执行更新 的产物，会在commit阶段被处理）
    effectTag:  当前fiber需要执行的副作用类型
    alternate:  用于构成**workInProgress**（从当前fiber树构建而来，反应了需要被更新渲染到用户屏幕的状态树）
    return: 指向父fiber节点
    sibling: 指向兄弟fiber节点
    child： 指向child fiber节点
  }

    workInProgress.child = reconcileChildFibers(
      workInProgress,
      current.child,
      nextChildren,
      renderExpirationTime,
    );

 function reconcileChildFibers(
    // 父节点fiber
    returnFiber: Fiber,
    // 父节点fiber的第一个child fiber
    currentFirstChild: Fiber | null,
    // 新产生的节点信息
    newChild: any,
    expirationTime: ExpirationTime,
  ): Fiber | null {
    // 处理<>{[...]}</> and <>...</> 直接取fragment的children
    const isUnkeyedTopLevelFragment =
      typeof newChild === 'object' &&
      newChild !== null &&
      newChild.type === REACT_FRAGMENT_TYPE &&
      newChild.key === null;
    if (isUnkeyedTopLevelFragment) {
      newChild = newChild.props.children;
    }

    // Handle object types
    const isObject = typeof newChild === 'object' && newChild !== null;

    if (isObject) {
      switch (newChild.$$typeof) {
        // React.createElement
        case REACT_ELEMENT_TYPE:
          return placeSingleChild(
            reconcileSingleElement(
              returnFiber,
              currentFirstChild,
              newChild,
              expirationTime,
            ),
          );
        // ReactDOM.createPortal
        case REACT_PORTAL_TYPE:
          return placeSingleChild(
            reconcileSinglePortal(
              returnFiber,
              currentFirstChild,
              newChild,
              expirationTime,
            ),
          );
      }
    }

    if (typeof newChild === 'string' || typeof newChild === 'number') {
      // 文本
      return placeSingleChild(
        reconcileSingleTextNode(
          returnFiber,
          currentFirstChild,
          '' + newChild,
          expirationTime,
        ),
      );
    }

    if (isArray(newChild)) {
      // 数组
      return reconcileChildrenArray(
        returnFiber,
        currentFirstChild,
        newChild,
        expirationTime,
      );
    }

    if (getIteratorFn(newChild)) {
      // generator
      return reconcileChildrenIterator(
        returnFiber,
        currentFirstChild,
        newChild,
        expirationTime,
      );
    }

   ......

    // 删除没有匹配的子节点
    return deleteRemainingChildren(returnFiber, currentFirstChild);
  }

function reconcileSingleElement(
    returnFiber: Fiber,
    currentFirstChild: Fiber | null,
    element: ReactElement,
    expirationTime: ExpirationTime,
  ): Fiber {
    // 要更新的child的key
    const key = element.key;
    // current child
    let child = currentFirstChild;
    // 取第一个不为null的current child
    while (child !== null) {
      // 判断current child 和 要更新的child的key 是否相等
      if (child.key === key) {
        switch (child.tag) {
          case Fragment: {
            if (element.type === REACT_FRAGMENT_TYPE) {
              // "删除" current child 的 sibling
              deleteRemainingChildren(returnFiber, child.sibling);
              // 复用current child， 传入要更新的child的props
              const existing = useFiber(child, element.props.children);
              existing.return = returnFiber;
              if (__DEV__) {
                existing._debugSource = element._source;
                existing._debugOwner = element._owner;
              }
              return existing;
            }
            break;
          }
          case Block:
            if (enableBlocksAPI) {
              if (
                element.type.$$typeof === REACT_BLOCK_TYPE &&
                element.type.render === child.type.render
              ) {
                deleteRemainingChildren(returnFiber, child.sibling);
                // 复用current child， 传入要更新的child的props
                const existing = useFiber(child, element.props);
                existing.type = element.type;
                existing.return = returnFiber;
                if (__DEV__) {
                  existing._debugSource = element._source;
                  existing._debugOwner = element._owner;
                }
                return existing;
              }
            }

          default: {
            // type 相同
            if (
              child.elementType === element.type ||
              (__DEV__
                ? isCompatibleFamilyForHotReloading(child, element)
                : false)
            ) {
              deleteRemainingChildren(returnFiber, child.sibling);
              // 复用current child， 传入要更新的child的props
              const existing = useFiber(child, element.props);
              existing.ref = coerceRef(returnFiber, child, element);
              existing.return = returnFiber;
              if (__DEV__) {
                existing._debugSource = element._source;
                existing._debugOwner = element._owner;
              }
              return existing;
            }
            break;
          }
        }
        // "删除" 不能复用的节点
        deleteRemainingChildren(returnFiber, child);
        break;
      } else {
        // key不相等，“删除” current child （标记child的effectTag为Deletion）
        deleteChild(returnFiber, child);
      }
      child = child.sibling;
    }

    // 最终没有可复用的节点，创建节点
    if (element.type === REACT_FRAGMENT_TYPE) {
      const created = createFiberFromFragment(
        element.props.children,
        returnFiber.mode,
        expirationTime,
        element.key,
      );
      created.return = returnFiber;
      return created;
    } else {
      const created = createFiberFromElement(
        element,
        returnFiber.mode,
        expirationTime,
      );
      created.ref = coerceRef(returnFiber, currentFirstChild, element);
      created.return = returnFiber;
      return created;
    }
  }

 function reconcileChildrenArray(
    // current fiber 父节点
    returnFiber: Fiber,
    // current fiber 的第一个child， 其余child用sibling指针链接 （父节点没有指向非首个子节点的指针）
    currentFirstChild: Fiber | null,
    // 当前要更新的child 数组
    newChildren: Array<*>,
    expirationTime: ExpirationTime,
  ): Fiber | null {
    // 需要返回的结果，当返回时，已经是匹配复用好了的fiber first child，其余child用sibling指针链接
    let resultingFirstChild: Fiber | null = null;
    let previousNewFiber: Fiber | null = null;

    let oldFiber = currentFirstChild;
    // 最后一个可复用节点的index， index指的是current fiber child（oldFiber）对应的index
    let lastPlacedIndex = 0;
    let newIdx = 0;
    let nextOldFiber = null;
    // newChildren第一次循环
    // 处理的是key相同，并且是按顺序的，也就是newChildren 的节点没有改变位置
    // 这一次的循环处理完后，有如下结果
    // 1. newChildren没有遍历完，oldFiber也没有遍历完，待后续处理
    // 2. newChildren 数据已经匹配处理完成, 那就要标记删除oldFiber的节点
    // 3. 没有oldFiber可以复用，那就要新建插入fiber
    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
      if (oldFiber.index > newIdx) {
        nextOldFiber = oldFiber;
        oldFiber = null;
      } else {
        nextOldFiber = oldFiber.sibling;
      }
      // key相等就复用oldFiber
      const newFiber = updateSlot(
        returnFiber,
        oldFiber,
        newChildren[newIdx],
        expirationTime,
      );
      if (newFiber === null) {
        if (oldFiber === null) {
          oldFiber = nextOldFiber;
        }
        break;
      }
      // shouldTrackSideEffects 非首屏渲染为true， 表示需要标记 workInProgress child的effectTag
      if (shouldTrackSideEffects) {
        // newFiber.alternate ===null 匹配完成
        if (oldFiber && newFiber.alternate === null) {
          //标记删除其余的old fiber child
          deleteChild(returnFiber, oldFiber);
        }
      }
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
      if (previousNewFiber === null) {
        resultingFirstChild = newFiber;
      } else {
        previousNewFiber.sibling = newFiber;
      }
      // 记录能匹配到的最后一个newFiber child
      previousNewFiber = newFiber;
      // 记录能匹配到的最后一个oldFiber child
      oldFiber = nextOldFiber;
    }
     
    // newChildren 数据已经匹配处理完成
    if (newIdx === newChildren.length) {
      // 标记删除其余的old fiber child
      deleteRemainingChildren(returnFiber, oldFiber);
      return resultingFirstChild;
    }

    if (oldFiber === null) {
      // 没有oldFiber可以复用，新建插入fiber
      for (; newIdx < newChildren.length; newIdx++) {
        const newFiber = createChild(
          returnFiber,
          newChildren[newIdx],
          expirationTime,
        );
        if (newFiber === null) {
          continue;
        }
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        if (previousNewFiber === null) {
          // TODO: Move out of the loop. This only happens for the first run.
          resultingFirstChild = newFiber;
        } else {
          // 用sibling串联newFiber
          previousNewFiber.sibling = newFiber;
        }
        previousNewFiber = newFiber;
      }
      return resultingFirstChild;
    }

    // Add all children to a key map for quick lookups.
    // 处理oldFiber， 转换为一个map， key为oldFiber节点的key， value为oldFiber child
    const existingChildren = mapRemainingChildren(returnFiber, oldFiber);

    // newChildren第二次循环开始
    // 处理的是newChildren的节点位置换了
    // 这里的逻辑有点绕，需要举🌰
    for (; newIdx < newChildren.length; newIdx++) {
      const newFiber = updateFromMap(
        existingChildren,
        returnFiber,
        newIdx,
        newChildren[newIdx],
        expirationTime,
      );
      if (newFiber !== null) {
        if (shouldTrackSideEffects) {
          if (newFiber.alternate !== null) {
            // The new fiber is a work in progress, but if there exists a
            // current, that means that we reused the fiber. We need to delete
            // it from the child list so that we don't add it to the deletion
            // list.
            existingChildren.delete(
              newFiber.key === null ? newIdx : newFiber.key,
            );
          }
        }
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        if (previousNewFiber === null) {
          resultingFirstChild = newFiber;
        } else {
          previousNewFiber.sibling = newFiber;
        }
        previousNewFiber = newFiber;
      }
    }

    if (shouldTrackSideEffects) {
      // Any existing children that weren't consumed above were deleted. We need
      // to add them to the deletion list.
      existingChildren.forEach((child) => deleteChild(returnFiber, child));
    }

    return resultingFirstChild;
  }

// 之前
abcd

// 之后
acdb

===第一轮遍历开始===
a（之后）vs a（之前）  
key不变，可复用
此时 a 对应的oldFiber（之前的a）在之前的数组（abcd）中索引为0
所以 lastPlacedIndex = 0;

继续第一轮遍历...

c（之后）vs b（之前）  
key改变，不能复用，跳出第一轮遍历
此时 lastPlacedIndex === 0;
===第一轮遍历结束===

===第二轮遍历开始===
newChildren === cdb，没用完，不需要执行删除旧节点
oldFiber === bcd，没用完，不需要执行插入新节点

将剩余oldFiber（bcd）保存为map

// 当前oldFiber：bcd
// 当前newChildren：cdb

继续遍历剩余newChildren

key === c 在 oldFiber中存在
const oldIndex = c（之前）.index;
即 oldIndex 代表当前可复用节点（c）在上一次更新时的位置索引
此时 oldIndex === 2;  // 之前节点为 abcd，所以c.index === 2
比较 oldIndex 与 lastPlacedIndex;

如果 oldIndex >= lastPlacedIndex 代表该可复用节点不需要移动
并将 lastPlacedIndex = oldIndex;
如果 oldIndex < lastplacedIndex 该可复用节点之前插入的位置索引小于这次更新需要插入的位置索引，代表该节点需要向右移动

在例子中，oldIndex 2 > lastPlacedIndex 0，
则 lastPlacedIndex = 2;
c节点位置不变

继续遍历剩余newChildren

// 当前oldFiber：bd
// 当前newChildren：db

key === d 在 oldFiber中存在
const oldIndex = d（之前）.index;
oldIndex 3 > lastPlacedIndex 2 // 之前节点为 abcd，所以d.index === 3
则 lastPlacedIndex = 3;
d节点位置不变

继续遍历剩余newChildren

// 当前oldFiber：b
// 当前newChildren：b

key === b 在 oldFiber中存在
const oldIndex = b（之前）.index;
oldIndex 1 < lastPlacedIndex 3 // 之前节点为 abcd，所以b.index === 1
则 b节点需要向右移动
===第二轮遍历结束===

最终acd 3个节点都没有移动，b节点被标记为移动

(function(modules) {
  . . .
  // cache
  var installedModules = {};

  function __webpack_require__(moduleId) {
     // check cache
    if (installedModules[id]) {
      return installedModules[id].exports;
    }

     // create new module and cache it
     var module = installedModules[id] = {
       id: id,
       exports: {}
     };

     // execute the module function
     modules[id].call(module.exports, module, module.exports, __webpack_require__);
  }

  // load entry module and return exports
   return __webpack_require__(0);
})({
  "hello.js": function() {},
  "app.js": function() {},
  0:  function() {}
});

class Test extends Component<
  Record<string, unknown>,
  { [propName: string]: number }
> {
  constructor(props: Record<string, unknown>) {
    super(props)
    this.state = {
      num: 1,
      number: 1,
      batchNumber: 1,
      clickNum: 1,
      callbackNum: 1
    }
  }

  componentDidMount(): void {
     // componentDidMount中正常的多次setState
    this.setState({
      num: this.state.num + 1
    })
    console.log(`num: ${this.state.num}`)
    this.setState({
      num: this.state.num + 2
    })
    console.log(`num: ${this.state.num}`)
    this.setState({
      num: this.state.num + 3
    })
    console.log(`num: ${this.state.num}`)

      // componentDidMount中在setTimeout内多次setState
    setTimeout(() => {
      this.setState({
        number: this.state.number + 1
      })
      console.log(`number: ${this.state.number}`)
      this.setState({
        number: this.state.number + 2
      })
      console.log(`number: ${this.state.number}`)
      this.setState({
        number: this.state.number + 3
      })
      console.log(`number: ${this.state.number}`)
    }, 0)

     // componentDidMount中在unstable_batchedUpdates内多次setState
    batchedUpdates(() => {
      this.setState({
        batchNumber: this.state.batchNumber + 1
      })
      console.log(`batchNumber: ${this.state.batchNumber}`)

      this.setState({
        batchNumber: this.state.batchNumber + 2
      })
      console.log(`batchNumber: ${this.state.batchNumber}`)
      this.setState({
        batchNumber: this.state.batchNumber + 3
      })
      console.log(`batchNumber: ${this.state.batchNumber}`)
    })

    // componentDidMount中在使用setState传入函数的多次setState
    this.setState((state) => ({
      callbackNum: state.callbackNum + 1
    }))
    console.log(`callbackNum: ${this.state.callbackNum}`)
    this.setState((state) => ({
      callbackNum: state.callbackNum + 2
    }))
    console.log(`callbackNum: ${this.state.callbackNum}`)
    this.setState((state) => ({
      callbackNum: state.callbackNum + 3
    }))
    console.log(`callbackNum: ${this.state.callbackNum}`)
  }

   // 在onClick 中多次setState
  handleTestClick: () => void = () => {
    this.setState((preState) => ({
      clickNum: preState.clickNum + 1
    }))
    console.log(`clickNum: ${this.state.clickNum}`)
    this.setState((preState) => ({
      clickNum: preState.clickNum + 2
    }))
    console.log(`clickNum: ${this.state.clickNum}`)
    this.setState((preState) => ({
      clickNum: preState.clickNum + 3
    }))
    console.log(`clickNum: ${this.state.clickNum}`)
  }

  render(): React.ReactElement {
    return (
      <>
        <h1 onClick={this.handleTestClick}> Test </h1>
        <p>clickNum {this.state.clickNum}</p>
        <p>callbackNum {this.state.callbackNum}</p>
        <p>batchNumber {this.state.batchNumber}</p>
        <p>number {this.state.number}</p>
        <p>num {this.state.num}</p>
      </>
    )
  }
}

function batchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
  const previousIsBatchingUpdates = isBatchingUpdates;
  // isBatchingUpdates 设置为true
  isBatchingUpdates = true;
  try {
    return fn(a);
  } finally {
    // 复原isBatchingUpdates 
    isBatchingUpdates = previousIsBatchingUpdates;
    if (!isBatchingUpdates && !isRendering) {
      performSyncWork();
    }
  }
}

function batchedUpdates<A, R>(fn: A => R, a: A): R {
  const prevExecutionContext = executionContext;
  executionContext |= BatchedContext;
  try {
    return fn(a);
  } finally {
    executionContext = prevExecutionContext;
    if (executionContext === NoContext) {
      // Flush the immediate callbacks that were scheduled during this batch
      flushSyncCallbackQueue();
    }
  }
}

// scheduleUpdateOnFiber也就是scheduleWork (在enqueueSetState中调用)
function scheduleUpdateOnFiber(
  fiber: Fiber,
  lane: Lane,
  eventTime: number,
) {
  checkForNestedUpdates();
  warnAboutRenderPhaseUpdatesInDEV(fiber);

  const root = markUpdateLaneFromFiberToRoot(fiber, lane);
  if (root === null) {
    warnAboutUpdateOnUnmountedFiberInDEV(fiber);
    return null;
  }

  // TODO: requestUpdateLanePriority also reads the priority. Pass the
  // priority as an argument to that function and this one.
  const priorityLevel = getCurrentPriorityLevel();

  if (lane === SyncLane) {
    if (
      // 是否在unbatched update中
      (executionContext & LegacyUnbatchedContext) !== NoContext &&
      (executionContext & (RenderContext | CommitContext)) === NoContext
    ) {
      schedulePendingInteractions(root, lane);
      performSyncWorkOnRoot(root);
    } else {
      ensureRootIsScheduled(root, eventTime);
      schedulePendingInteractions(root, lane);
      // setTimeout命中，触发flushSyncCallbackQueue
      if (executionContext === NoContext) {
        flushSyncCallbackQueue();
      }
    }
  } else {
    if (
      (executionContext & DiscreteEventContext) !== NoContext &&
      (priorityLevel === UserBlockingSchedulerPriority ||
        priorityLevel === ImmediateSchedulerPriority)
    ) {
      if (rootsWithPendingDiscreteUpdates === null) {
        rootsWithPendingDiscreteUpdates = new Set([root]);
      } else {
        rootsWithPendingDiscreteUpdates.add(root);
      }
    }
    ensureRootIsScheduled(root, eventTime);
    schedulePendingInteractions(root, lane);
  }
  mostRecentlyUpdatedRoot = root;
}