import  { lazy , Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./xxx'));

export default function App() {
  return (
    <Suspense fallback={<span>loading...</span>}>
      <LazyComponent/>
    </Suspense>
  )
}

const LazyComponent = React.lazy(() => import('./LazyComponent.js'));

const FunctionComponent = () => {
    const [count, setCount] = React.useState(1);

    const onClick = () => {
      setCount(count + 1);
    };


    return (
      <div>
        <button onClick={onClick}>{ count }</button>
        <LazyComponent/> 
      </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<FunctionComponent />);

function lazy(ctor) {
    var payload = { // 創(chuàng)建一個payload
      _status: Uninitialized, // -1
      _result: ctor, // ctor 就是用戶傳遞的哪個()=> import("xxxxx") 實際上等價于 ()=> Promise<any>
    };
    var lazyType = { // 這是一個REACT_LAZY_TYPE類型的ReactElement
      $$typeof: REACT_LAZY_TYPE,
      _payload: payload,
      _init: lazyInitializer, // 下面分析一下lazyInitializer
    };
    // 下面是給lazyType做屬性的配置，不重要了解即可
    {
      Object.defineProperties(lazyType, {
        defaultProps: {
          configurable: true,
          get: function () {...},
          set: function (newDefaultProps) { ...},
        },
        propTypes: {
          configurable: true,
          get: function () {... },
          set: function (newPropTypes) {...}
        }
      });
    }

    return lazyType;
}

function lazyInitializer(payload) {
    if (payload._status === Uninitialized) { // 如果是初始化狀態(tài)
      var ctor = payload._result; // ()=> import('xxx')
      var thenable = ctor(); // 得到一個Promise
      thenable.then( // 調(diào)用.then
        function (moduleObject) {
          if (
            payload._status === Pending ||
            payload._status === Uninitialized
          ) { // 標(biāo)記成功
            var resolved = payload;
            resolved._status = Resolved;
            resolved._result = moduleObject;
          }
        },
        function (error) {
          if ( // 標(biāo)記失敗
            payload._status === Pending ||
            payload._status === Uninitialized
          ) {
            var rejected = payload;
            rejected._status = Rejected;
            rejected._result = error;
          }
        }
      );

      if (payload._status === Uninitialized) {// 如果是初始化
        var pending = payload;
        pending._status = Pending; // 標(biāo)記正在進行
        pending._result = thenable;
      }
    }

    if (payload._status === Resolved) { // 如果不是初始化
      var moduleObject = payload._result;
      if (moduleObject === undefined) {
         報錯
      }
      if (!("default" in moduleObject)) {
        報錯
      }
      return moduleObject.default;
    } else {
      // 初始化都會進入到這里
      throw payload._result; // 拋出錯誤
    }
}

function mountLazyComponent(
    _current,
    workInProgress,
    elementType,
    renderLanes
  ) {
    var props = workInProgress.pendingProps; // lazy的組件一般沒有props
    var lazyComponent = elementType; // ReactElement
    var payload = lazyComponent._payload; // 這就是上面的payload
    var init = lazyComponent._init; // 獲取那個init函數(shù)，就是我們上面分析的那個
    var Component = init(payload); // 調(diào)用它，第一次會拋出錯誤
    //芭比Q，下面不用看了
    ...
    
}

do {
  try {
    workLoopSync(); // 當(dāng)這里拋出錯誤時
    break;
  } catch (thrownValue) {
    handleError(root, thrownValue); // 會來到這里
  }
} while (true);

function throwException(value){// 這個value就是錯誤信息
  ...
  if (
      value !== null &&
      typeof value === "object" &&
      typeof value.then === "function" // 如果是一個Promise
    ) {
      var wakeable = value; //
      var suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber); // 如有上層有Suspense包裹的話，這里先不談
      if (suspenseBoundary !== null) {
        ...
      } else{
        attachPingListener(root, wakeable, rootRenderLanes); // 這里就是關(guān)鍵了，它會監(jiān)聽這個Promise的情況
      }
}

var ping = pingSuspendedRoot.bind(null, root, wakeable, lanes);
weakable.then(ping , ping)

function mountLazyComponent(
    _current,
    workInProgress,
    elementType,
    renderLanes
  ) {
    var props = workInProgress.pendingProps; // lazy的組件一般沒有props
    var lazyComponent = elementType; // ReactElement
    var payload = lazyComponent._payload; // 這就是上面的payload
    var init = lazyComponent._init; // 獲取那個init函數(shù)，就是我們上面分析的那個
    var Component = init(payload); // 這一次調(diào)用直接獲取到值，而不會拋出錯誤，往下調(diào)和異步組件
    
    workInProgress.type = Component;
    var resolvedTag = (workInProgress.tag = resolveLazyComponentTag(Component)); // 獲取對應(yīng)的fiber類型
    var resolvedProps = resolveDefaultProps(Component, props);
    var child;

    switch (resolvedTag) {
      case FunctionComponent: {
        ...
        child = updateFunctionComponent( // 繼續(xù)調(diào)和
          null,
          workInProgress,
          Component,
          resolvedProps,
          renderLanes
        );
        return child;
      }
      ...
    }
    
}

function throwException(value){ // 這個value就是錯誤信息
  ...
  if (
      value !== null &&
      typeof value === "object" &&
      typeof value.then === "function" // 如果是一個Promise
    ) {
      var wakeable = value; //
      var suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber); // 如有上層有Suspense包裹的話，這里會判定有，實際上就是遍歷祖先節(jié)點，看是否有Suspense類型的fiber
      if (suspenseBoundary !== null) {
        suspenseBoundary.flags &= ~ForceClientRender;
        markSuspenseBoundaryShouldCapture( // 打標(biāo)簽應(yīng)該被捕獲
          suspenseBoundary,
          returnFiber,
          sourceFiber,
          root,
          rootRenderLanes
        ); 
        attachPingListener(root, wakeable, rootRenderLanes); // 監(jiān)聽重啟
      } else{
        ...
      }
}

<Suspense fallback={...}>
  <Lazy/>
</Suspense>

do {
  try {
    workLoopSync(); // 這里面需要workInProgress有值才能正常運行
    break;
  } catch (thrownValue) {
    handleError(root, thrownValue);
    // 結(jié)束后，還是會執(zhí)行
  }
} while (true);