四月八日

function createSyntheticEvent(Interface) {
  function SyntheticBaseEvent(reactName, reactEventType, targetInst, nativeEvent, nativeEventTarget) {
    this._reactName = reactName;
    this._targetInst = targetInst;
    this.type = reactEventType;
    this.nativeEvent = nativeEvent;
    this.target = nativeEventTarget;
    this.currentTarget = null;
  _assign(SyntheticBaseEvent.prototype, {
    preventDefault: function () {},
    stopPropagation: function () {this.isPropagationStopped = functionThatReturnsTrue;},
    persist: function () {},
    isPersistent: functionThatReturnsTrue
  });

  return SyntheticBaseEvent;
}
var UIEventInterface = _assign({}, EventInterface, {
  view: 0,
  detail: 0
});

var SyntheticUIEvent = createSyntheticEvent(UIEventInterface);

function listenToAllSupportedEvents(rootContainerElement) {
  {
    var listeningMarker = '_reactListening' + Math.random().toString(36).slice(2);
    rootContainerElement[listeningMarker] = true;
    allNativeEvents.forEach(function (domEventName) {
      // 没有事件委托的事件，也就是不能冒泡到document的事件
      if (!nonDelegatedEvents.has(domEventName)) {
        listenToNativeEvent(domEventName, false, rootContainerElement, null);
      }

      listenToNativeEvent(domEventName, true, rootContainerElement, null);
    });
  }
}

function createEventListenerWrapperWithPriority(targetContainer, domEventName, eventSystemFlags) {
  var eventPriority = getEventPriorityForPluginSystem(domEventName);
  var listenerWrapper;

  switch (eventPriority) {
    case DiscreteEvent:
      listenerWrapper = dispatchDiscreteEvent;
      break;

    case UserBlockingEvent:
      listenerWrapper = dispatchUserBlockingUpdate;
      break;

    case ContinuousEvent:
    default:
      listenerWrapper = dispatchEvent;
      break;
  }

  return listenerWrapper.bind(null, domEventName, eventSystemFlags, targetContainer);
}

function flushDiscreteUpdates() {
  flushPendingDiscreteUpdates();
  flushPassiveEffects();
}

var targetInst = targetNode[internalInstanceKey];

function batchedEventUpdates(fn, a, b) {
  if (isBatchingEventUpdates) {
    // If we are currently inside another batch, we need to wait until it
    // fully completes before restoring state.
    return fn(a, b);
  }

  isBatchingEventUpdates = true;

  try {
    return batchedEventUpdatesImpl(fn, a, b);
  } finally {
    isBatchingEventUpdates = false;
    finishEventHandler();
  }
}

switch (domEventName) {
  case 'click':
    // Firefox creates a click event on right mouse clicks. This removes the
    // unwanted click events.
    if (nativeEvent.button === 2) {
      return;
    }

  case 'auxclick':
  case 'dblclick':
  case 'mousedown':
  case 'mousemove':
  case 'mouseup': // TODO: Disabled elements should not respond to mouse events

  /* falls through */

  case 'mouseout':
  case 'mouseover':
  case 'contextmenu':
    SyntheticEventCtor = SyntheticMouseEvent;
    break;
}
while (instance !== null) {
  var _instance2 = instance,
      stateNode = _instance2.stateNode,
      tag = _instance2.tag; // Handle listeners that are on HostComponents (i.e. <div>)

    if (reactEventName !== null) {
      var props = getFiberCurrentPropsFromNode(stateNode);
      var listener = props[registrationName];

     if (captureListener != null) {
        listeners.unshift(createDispatchListener(instance, captureListener, currentTarget));
      }

      var bubbleListener = getListener(instance, reactName);

      if (bubbleListener != null) {
        listeners.push(createDispatchListener(instance, bubbleListener, currentTarget));
      }
    }
  instance = instance.return;
}


dispatchQueue.push({
  event: _event,
  listeners: _listeners
});

function processDispatchQueueItemsInOrder(event, dispatchListeners, inCapturePhase) {gfdg
  var previousInstance;

  for (var i = dispatchListeners.length - 1; i >= 0; i--) {
    var _dispatchListeners$i = dispatchListeners[i],
        instance = _dispatchListeners$i.instance,
        currentTarget = _dispatchListeners$i.currentTarget,
        listener = _dispatchListeners$i.listener;

    if (instance !== previousInstance && event.isPropagationStopped()) {
      return;
    }

    executeDispatch(event, listener, currentTarget);
    previousInstance = instance;
  }
}

import React from "react";
import {
  Link
} from "react-router-dom";

const Header:React.FC = () =>{
    return <div>
       <Link to="/">hello</Link>
       <Link to="/login">login</Link>
    </div>
}

export default Header;

import React from "react";
import {
    Switch,
    Route,
  } from "react-router-dom";

  
import Hello  from "./hello";
import Login  from "./login";

const Routes = () => {
  return (
    <Switch>
        <Route path="/hello">
            <Hello />
        </Route>
        <Route path="/login">
            <Login />
        </Route>
        <Route path="/">
            <Hello />
        </Route>
    </Switch>
  )
}
export default Routes;

import React from "react";
import Koa from 'koa';
import {
  BrowserRouter,
} from "react-router-dom";

import Routes from './routes'

const Router:React.FC<unknown> = () =>{
    return (
        <BrowserRouter>
            <Routes />
        </BrowserRouter>
    )
}

export default Router;

import ReactDom from 'react-dom';
import React from 'react';
import Router from './router';

const App = () => {
    
    return <Router />
}

ReactDom.hydrate(<App/>, document.getElementById('root'));

import React from "react";
import Koa from 'koa';
import {
    StaticRouter,
} from "react-router-dom";

import Routes from '../components/routes'

const context={};

const Router:React.FC<unknown> = ({ctx}) =>{
    return (
        <StaticRouter location={ctx.url} context={context}>
            <Routes />
        </StaticRouter>
    )
}

export default Router;

import Router from '@koa/router';
import ReactDOMServer from 'react-dom/server';
import React from 'react';
import App from './router';
const router = new Router();

router.get("/(.*)",async (ctx,next)=>{
    console.log(ctx);
    ctx.body=`
    <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <div id='root'>${ReactDOMServer.renderToString(<App {...{ctx}}/>)}</div>
            <script src='/index.js'></script>
        </body>
        </html>
    `
})

export default router;

import * as path from 'path';
import * as webpack from 'webpack';

const config: webpack.Configuration = {
    entry:'./src/components/hello.tsx',
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'static')
    },
    module:{
        rules:[
            {
                test:/\.tsx?$/,
                use:['babel-loader']
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    mode:'development',
}
export default config;

import koaStatic from 'koa-static';

router.get('/',async (ctx,next)=>{
    ctx.body=`
        <html lang="en">
            <body>
                ${ReactDOMServer.renderToString(<Home />)}
                <script src='/index.js'></script>
            </body>
        </html>
    `
})

app
.use(koaStatic(path.join((process.env as any).PWD,'./static')))
.use(router.routes())
.use(router.allowedMethods())

app.listen(conf.PORT,()=>{
    `server is running in port 3000`
});

import React from 'react';

const Hello:React.FC = () =>{
    return <div onClick={()=>{alert("hello")}}>Hello</div>
}

ReactDom.render(<Hello/>, document.getElementById('root'));
export default Hello;

import ReactDom from 'react-dom';
import React from 'react';
import Home from './home'

ReactDom.render(<Home/>, document.getElementById('root'));

ReactDom.hydrate(<Home/>, document.getElementById('root'));

import Koa from "koa";
import Router from "@koa/router";

const router = new Router();
const app = new Koa();

router.get("/", async (ctx, next) => {
  ctx.body = `
    <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
      </head>
      <body>
          Hello
      </body>
    </html>`;
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(conf.PORT, () => {
  `server is running in port 3000`;
});

require("@babel/register");
module.exports = require("./server");

import Hello from "react";

const Home: React.FC = () => {
  return <div>Hello</div>;
};

export default Hello;

import Koa from "koa";
import Home from "../components/home";

const router = new Router();
router.get("/", async (ctx, next) => {
  ctx.body = <Home />;
});

import ReactDOMServer from 'react-dom/server';
router.get('/',async (ctx,next)=>{
    ctx.body= ReactDOMServer.renderToString(<Home />;
})

requestIdleCallback(function myNonEssentialWork (deadline) {
  while (deadline.timeRemaining() > 0)
    doWorkIfNeeded();
})

function myNonEssentialWork (deadline) {
  while (deadline.timeRemaining() > 0 && tasks.length > 0)
    doWorkIfNeeded();

  if (tasks.length > 0)
    requestIdleCallback(myNonEssentialWork);
}

window.requestIdleCallback = window.requestIdleCallback || function(handler) {
  let startTime = Date.now();

  return setTimeout(function() {
    handler({
      didTimeout: false,
      timeRemaining: function() {
        return Math.max(0, 50.0 - (Date.now() - startTime));
      }
    });
  }, 1);
}

window.cancelIdleCallback = window.cancelIdleCallback || function(id) {
  clearTimeout(id);
}

var eventsToSend = [];

function onNavOpenClick () {
  eventsToSend.push(
    {
      category: 'button',
      action: 'click',
      label: 'nav',
      value: 'open'
    });

  schedulePendingEvents();
}

function schedulePendingEvents() {

  // 如果已经在调度中则返回
  if (isRequestIdleCallbackScheduled)
    return;

  isRequestIdleCallbackScheduled = true;

  if ('requestIdleCallback' in window) {
    // 最晚两秒之后上报数据
    requestIdleCallback(processPendingAnalyticsEvents, { timeout: 2000 });
  } else {
    processPendingAnalyticsEvents();
  }
}

function processPendingAnalyticsEvents (deadline) {

  // 重置状态
  isRequestIdleCallbackScheduled = false;

  // 针对没有实现 requestIdleCallback 的环境
  if (typeof deadline === 'undefined')
    deadline = { timeRemaining: function () { return Number.MAX_VALUE } };

  while (deadline.timeRemaining() > 0 && eventsToSend.length > 0) {
    var evt = eventsToSend.pop();

    ga('send', 'event',
        evt.category,
        evt.action,
        evt.label,
        evt.value);
  }

  // 如果还有任务在下次空闲时发送
  if (eventsToSend.length > 0)
    schedulePendingEvents();
}

const generateColor = () => {
    const r = Math.floor(Math.random()*255);
    const g = Math.floor(Math.random()*255);
    const b = Math.floor(Math.random()*255);
    return 'rgba('+ r +','+ g +','+ b +',0.8)';
}
const getRandomPos = (width,height,distance = 0) => ({
    x: distance/2 + (width - distance/2) * Math.random(),
    y: distance/2 + (height - distance/2) * Math.random(),
})
const Circle = ({position,color}) =>{
    return <div style={{
        width:10,
        height:10,
        borderRadius:"50%",
        backgroundColor:color,
        position:'absolute',
        left:position.x,
        top:position.y
    }}></div>
} 

const getKey =()=> Math.random().toString(36).substring(2,8)
const renderCircle = (count,width,height)=>  new Array(count).fill('circle').map(()=>(
    <Circle position={getRandomPos(width,height)} key={getKey()} color={generateColor()}/>
))

const calcRenderCount = (count,perRenderCount,times) => {
    if(perRenderCount *　times > count) return count % perRenderCount;
    return perRenderCount;
}

export default function Magnanimity(){
    const [list,setList] = useState([]);
    const total = useRef(20000);
    const throttleCount= useRef(500);

    const timeSpliceRender = useCallback((renderTimes,currentTime,width,height)=>{
        if(currentTime > renderTimes) return;
        const task = () => {
            const renderCount = calcRenderCount(total.current,throttleCount.current,currentTime);
            setList(list=> list.concat(renderCircle(renderCount,width,height)))
            currentTime++;
        }

        requestIdleCallback((deadline)=>{
            while (deadline.timeRemaining()>0) {
                task();
            }
            timeSpliceRender(renderTimes,currentTime,width,height);
        })

    },[setList,
        total,
        throttleCount
    ])

    useEffect(()=>{ 
        const currentTime = 1;
        const renderTimes = Math.ceil(total.current/throttleCount.current);
        const width = document.documentElement.clientWidth;
        const height = document.documentElement.clientHeight;
        timeSpliceRender(renderTimes,currentTime,width,height)

    },[
        timeSpliceRender,
        total,
        throttleCount
    ])

    return  <div 
        onClick={()=>console.log("click")}
    style={{
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight,
    }}>{list}</div>
}

function List({data}){
    const [height,setHeight] = useState(0);
    const [filterData,setFilterData] = useState([]);
    const [scrollTop,setScrollTop] = useState(0);
    const wrapperRef = useRef(null)

    useEffect(()=>{
        setHeight(()=> data.length * 40)
    },[
        data,
        setHeight
    ])

    useEffect(()=>{
        const arr = [];
        const boxHeight = wrapperRef.current.offsetHeight;

        // 如果离列表头尾超过三个元素则不在显示
        data.forEach((item,index) => {
            if(index * 40 - 1 - scrollTop <= -80) return 
            if(index * 40 - 1 - boxHeight - scrollTop >= 80) return 
            console.log(item)
            arr.push({
                ...item,
                top: index * 40
            })
        });
        setFilterData(arr);
        
    },[
        scrollTop,
        data,
        height,
        setFilterData,
        wrapperRef
    ])

    const scroll = useCallback((e)=>{
        // 滚动时重新筛选元素
        setScrollTop(e.target.scrollTop)
    },[setScrollTop])

    if(!data ||　!Array.isArray(data)) return null;
    return (
        <div style={{
            height:'100%',
            width:'100%',
            overflow:'auto'
        }}
        ref={wrapperRef}
        onScroll={scroll}
        >
            <ul
                style={{height,position:'relative'}}
            >
                {filterData.map(item => (
                    <li 
                        key={item.key}
                        style={{
                            padding:'5px 4px',
                            position:'absolute',
                            left:0,
                            right:0,
                            top:item.top
                        }}
                    >   
                        <div
                          style={{
                            background:'pink',
                            lineHeight:'30px',
                            height:'30px'
                          }}   
                        >
                            {item.value}
                        </div>
                    </li>)
                )}
            </ul>
        </div>
    )
}

export default function Comp(){
    const [data, setData] = useState(new Array(10).fill(1).map((item,index)=>({key:index,value:index})))
    return <div style={{width:300,height:600,border:'1px solid #000'}}>
        <List data={data}></List>
    </div>
}

function List({data=[]}){
    const wrapperRef = useRef(null)
    // 元素容器
    const containerRef = useRef(null);
    const [range,setRange] = useState([0,0])
    const info = useRef({
        // 屏幕外预渲染的个数
        preRenderCount:2,
        // 元素高度
        itemHeight:40
        
    })

    useEffect(()=>{
        const boxHeight = wrapperRef.current.offsetHeight;
        const {itemHeight,preRenderCount} = info.current;

        // 不需要关心data长度，如果截取的长度溢出，仍然会包含data中所有元素

        const end = Math.ceil(boxHeight/itemHeight) + preRenderCount;
        setRange([0,end]);
        
    },[
        info,
        wrapperRef,
        setRange
    ])

    const scroll = useCallback((e)=>{
        const scrollTop = e.target.scrollTop;
        const boxHeight = wrapperRef.current.offsetHeight;

        const {itemHeight,preRenderCount} = info.current;

        // 顶部有两个缓冲元素，滚动高度还在这两个元素高度范围内，则前两个元素会被保留
        const start = Math.floor(Math.max(0, scrollTop - preRenderCount * itemHeight) / itemHeight);
        
        // 不需要关心data长度，如果截取的长度溢出，仍然会包含data中所有元素
        const end =  Math.ceil((scrollTop + boxHeight)/itemHeight)　+　preRenderCount;

        // 计算内容区域偏移量 移动距离大于元素高度，重置视图框的位置
        const offset =  scrollTop - preRenderCount * itemHeight > 0 ? scrollTop - (scrollTop % itemHeight) - preRenderCount * itemHeight : 0;

        containerRef.current.style.transform= `translate3D(0,${offset}px,0)`

        setRange([start,end])

    },[1
        setRange,
        wrapperRef,
        containerRef
    ])

    const {itemHeight} =  info.current;
    const height = useMemo(()=>data.length * itemHeight,[data,itemHeight]);
    if(!data ||　!Array.isArray(data)) return null;
    return (
        <div style={{
            height:'100%',
            width:'100%',
            overflow:'auto',
            position:'relative'
        }}
        ref={wrapperRef}
        onScroll={scroll}
        >   
            <div style={{height}}></div>
            {/* 注意：对ul列表的操作可能会触发上层滚动条的事件，所以仍然让他脱离文档流 */}
            <ul
                ref={containerRef}
                style={{
                    position:'absolute',
                    top:0,
                    left:0,
                    right:0
                }}
            >
                {data.slice(...range).map(item => (
                    <li 
                        key={item.key}
                        style={{
                            height:itemHeight,
                            overflow:'hidden'
                        }}
                    >   
                        <div
                        style={{
                            background:'pink',
                            lineHeight:'30px',
                            height:'30px',
                            margin:'5px 4px'
                        }}   
                        >
                            {item.value}
                        </div>
                    </li>)
                )}
            </ul>
        </div>
    )
}

export default function Comp(){
    const [data, setData] = useState(new Array(100).fill(1).map((item,index)=>({key:index,value:index})))
    return <div style={{width:300,height:600,border:'1px solid #000'}}>
        <List data={data}></List>
    </div>
}

for (var i = 0; i < newChildren.length; i++) {
  var child = newChildren[i];
  knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber);
}

 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
    if (oldFiber.index > newIdx) {
        nextOldFiber = oldFiber;
        oldFiber = null;
    } else {
        nextOldFiber = oldFiber.sibling;
    }
    const newFiber = updateSlot(returnFiber,oldFiber,newChildren[newIdx],expirationTime,);
    if (newFiber === null) { break }
    // ..一些其他逻辑
    }
    if (shouldTrackSideEffects) {  // shouldTrackSideEffects 为更新流程。
        if (oldFiber && newFiber.alternate === null) {
            /* 找到了与新节点对应的fiber，但是不能复用，那么直接删除老节点 */
            deleteChild(returnFiber, oldFiber);
        }
    }
}

if (newIdx === newChildren.length) {
  // We've reached the end of the new children. We can delete the rest.
  deleteRemainingChildren(returnFiber, oldFiber);
  return resultingFirstChild;
}

if (oldFiber === null) {
  for (; newIdx < newChildren.length; newIdx++) {
    const newFiber = createChild(
      returnFiber,
      newChildren[newIdx],
      expirationTime
    );
    // ...
  }
}

const existingChildren = mapRemainingChildren(returnFiber, oldFiber);
if (_newFiber2 !== null) {
    if (shouldTrackSideEffects) {
        if (_newFiber2.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(_newFiber2.key === null ? newIdx : _newFiber2.key);
        }
    }

    lastPlacedIndex = placeChild(_newFiber2, lastPlacedIndex, newIdx);

    if (previousNewFiber === null) {
        resultingFirstChild = _newFiber2;
    } else {
        previousNewFiber.sibling = _newFiber2;
    }

    previousNewFiber = _newFiber2;
    }
}

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

function placeChild(newFiber, lastPlacedIndex, newIndex) {
    newFiber.index = newIndex;

    if (!shouldTrackSideEffects) {
      // Noop.
      return lastPlacedIndex;
    }

    var current = newFiber.alternate;

    if (current !== null) {
      var oldIndex = current.index;

      if (oldIndex < lastPlacedIndex) {
        // This is a move.
        newFiber.flags = Placement;
        return lastPlacedIndex;
      } else {
        // This item can stay in place.
        return oldIndex;
      }
    } else {
      // This is an insertion.
      newFiber.flags = Placement;
      return lastPlacedIndex;
    }
  }
}

function lazyInitializer<T>(payload: Payload<T>): T {
  if (payload._status === Uninitialized) {
    const ctor = payload._result;
    const thenable = ctor();
    // Transition to the next state.
    // This might throw either because it's missing or throws. If so, we treat it
    // as still uninitialized and try again next time. Which is the same as what
    // happens if the ctor or any wrappers processing the ctor throws. This might
    // end up fixing it if the resolution was a concurrency bug.
    thenable.then(
      moduleObject => {
        if (payload._status === Pending || payload._status === Uninitialized) {
          // Transition to the next state.
          const resolved: ResolvedPayload<T> = (payload: any);
          resolved._status = Resolved;
          resolved._result = moduleObject;
        }
      },
      error => {
        if (payload._status === Pending || payload._status === Uninitialized) {
          // Transition to the next state.
          const rejected: RejectedPayload = (payload: any);
          rejected._status = Rejected;
          rejected._result = error;
        }
      },
    );
    if (payload._status === Uninitialized) {
      // In case, we're still uninitialized, then we're waiting for the thenable
      // to resolve. Set it as pending in the meantime.
      const pending: PendingPayload = (payload: any);
      pending._status = Pending;
      pending._result = thenable;
    }
  }
  if (payload._status === Resolved) {
    const moduleObject = payload._result;
   
    return moduleObject.default;
  } else {
    throw payload._result;
  }
}

export function lazy<T>(
  ctor: () => Thenable<{default: T, ...}>,
): LazyComponent<T, Payload<T>> {
  const payload: Payload<T> = {
    // We use these fields to store the result.
    _status: -1,
    _result: ctor,
  };

  const lazyType: LazyComponent<T, Payload<T>> = {
    $$typeof: REACT_LAZY_TYPE,
    _payload: payload,
    _init: lazyInitializer,
  };
  
  return lazyType;
}

function mountLazyComponent(_current, workInProgress, elementType, updateLanes, renderLanes) {
  if (_current !== null) {
    // A lazy component only mounts if it suspended inside a non-
    // concurrent tree, in an inconsistent state. We want to treat it like
    // a new mount, even though an empty version of it already committed.
    // Disconnect the alternate pointers.
    _current.alternate = null;
    workInProgress.alternate = null; // Since this is conceptually a new fiber, schedule a Placement effect

    workInProgress.flags |= Placement;
  }

  var props = workInProgress.pendingProps;
  var lazyComponent = elementType;
  var payload = lazyComponent._payload;
  var init = lazyComponent._init;

  // 第一次挂载组件时，因为promise状态不是完成状态，会抛出错误被上层的try catch捕获
  var Component = init(payload);

  workInProgress.type = Component;
  // 如果已经加载成功，分析出异步组件的类型
  var resolvedTag = workInProgress.tag = resolveLazyComponentTag(Component);

  // 合并异步组件的props和通过lazy创建组件时传入的props
  var resolvedProps = resolveDefaultProps(Component, props);
  var child;

  // 根据不同的组件类型处理，如果没有则抛出错误
  switch (resolvedTag) {
      //...
  }
  {
    throw Error( "Element type is invalid. Received a promise that resolves to: " + Component + ". Lazy element type must resolve to a class or function." + hint );
  }
}

function createFiberFromSuspense(pendingProps, mode, lanes, key) {
  var fiber = createFiber(SuspenseComponent, pendingProps, key, mode); // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.
  // This needs to be fixed in getComponentName so that it relies on the tag
  // instead.

  fiber.type = REACT_SUSPENSE_TYPE;
  fiber.elementType = REACT_SUSPENSE_TYPE;
  fiber.lanes = lanes;
  return fiber;
}

fallbackChildFragment.return = workInProgress;

primaryChildFragment.sibling = fallbackChildFragment;

workInProgress.child = primaryChildFragment;

return fallbackChildFragment

function renderRootSync(root, lanes) {
  do {
    try {
      workLoopSync();
      break;
    } catch (thrownValue) {
      handleError(root, thrownValue);
    }
  } while (true);
}

function handleError(root, thrownValue) {
  do {
    try {
      ...
      // 继续执行
      throwException(...);
      // 这里完成时   会将wip设置为自己的父节点  也就是 suspense 节点
      workInProgress = completeUnitOfWork(workInProgress);
    } catch (yetAnotherThrownValue) {
      ...
      continue
    }
    // Return to the normal work loop.
    return;
  } while (true);
}

function throwException(
  root: FiberRoot,
  returnFiber: Fiber,
  sourceFiber: Fiber,
  value: mixed,
  renderExpirationTime: ExpirationTime,
) {
  ...
  if (
    value !== null &&
    typeof value === 'object' &&
    typeof value.then === 'function'
  ) {
    // This is a thenable.
    const thenable: Thenable = (value: any);

    ...
    do {
      if (
        workInProgress.tag === SuspenseComponent &&
        shouldCaptureSuspense(workInProgress, hasInvisibleParentBoundary)
      ) {
        // 一个 set 结构存储在 updateQueue
        const thenables: Set<Thenable> = (workInProgress.updateQueue: any);
        if (thenables === null) {
          const updateQueue = (new Set(): any);
          updateQueue.add(thenable);
          // 第一次新增
          workInProgress.updateQueue = updateQueue;
        } else {
          // 追加
          thenables.add(thenable);
        }
           ...
          // 同步设置
          sourceFiber.expirationTime = Sync;

          return;
        }

        ...
      workInProgress = workInProgress.return;
    } while (workInProgress !== null);
    
  }
  ...
}

function attachSuspenseRetryListeners(finishedWork) {
  // If this boundary just timed out, then it will have a set of wakeables.
  // For each wakeable, attach a listener so that when it resolves, React
  // attempts to re-render the boundary in the primary (pre-timeout) state.
  var wakeables = finishedWork.updateQueue;

  if (wakeables !== null) {
    finishedWork.updateQueue = null;
    var retryCache = finishedWork.stateNode;

    if (retryCache === null) {
      retryCache = finishedWork.stateNode = new PossiblyWeakSet();
    }

    wakeables.forEach(function (wakeable) {
      // Memoize using the boundary fiber to prevent redundant listeners.
      var retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);

      if (!retryCache.has(wakeable)) {
        {
          if (wakeable.__reactDoNotTraceInteractions !== true) {
            retry = tracing.unstable_wrap(retry);
          }
        }

        retryCache.add(wakeable);
        // 通过then方法在resolve之后执行
        wakeable.then(retry, retry);
      }
    });
  }
}

/**
 * 
 * @param {*} Component  需要异步数据的component 
 * @param {*} api        请求数据接口,返回Promise，可以再then中获取与后端交互的数据
 * @returns 
 */
function AysncComponent(Component,api){
    const AysncComponentPromise = () => new Promise(async (resolve)=>{
          const data = await api()
          resolve({
              default: (props) => <Component rdata={data} { ...props}  />
          })
    })
    return React.lazy(AysncComponentPromise)
}

/* 数据模拟 */
const getData=()=>{
    return new Promise((resolve)=>{
        //模拟异步
        setTimeout(() => {
             resolve({
                 name:'alien',
                 say:'let us learn React!'
             })
        }, 1000)
    })
}
/* 测试异步组件 */
function Test({ rdata  , age}){
    const { name , say } = rdata
    console.log('组件渲染')
    return <div>
        <div> hello , my name is { name } </div>
        <div>age : { age } </div>
        <div> i want to say { say } </div>
    </div>
}
/* 父组件 */
export default class Index extends React.Component{
    LazyTest = AysncComponent(Test,getData) 
    /* 需要每一次在组件内部声明，保证每次父组件挂载，都会重新请求数据 ，防止内存泄漏。 */
    render(){
        const { LazyTest } = this
        return <div>
           <Suspense fallback={<div>loading...</div>} >
              <LazyTest age={18}  />
          </Suspense>
        </div>
    }
}

function HOC(WrapComponent){
    return class Advance extends React.Component{
       state={
           name:'alien'
       }
       render(){
           return <WrapComponent  { ...this.props } { ...this.state }  />
       }
    }
}

class Index extends React.Component{
  render(){
    return <div> hello,world  </div>
  }
}
function HOC(Component){
    return class wrapComponent extends Component{ /* 直接继承需要包装的组件 */
        
    }
}
export default HOC(Index) 

function withRouter(Component) {
  const displayName = `withRouter(${Component.displayName || Component.name})`;
  const C = props => {
      /*  获取 */
    const { wrappedComponentRef, ...remainingProps } = props;
    return (
      <RouterContext.Consumer>
        {context => {
          return (
            <Component
              {...remainingProps} // 组件原始的props 
              {...context}        // 存在路由对象的上下文，history  location 等 
              ref={wrappedComponentRef}
            />
          );
        }}
      </RouterContext.Consumer>
    );
  };

  C.displayName = displayName;
  C.WrappedComponent = Component;
  /* 继承静态属性 */
  return hoistStatics(C, Component);
}
export default withRouter

const HOC = (WrapComponent) =>
  class Index  extends WrapComponent {
    render() {
      if (this.props.visible) {
        return super.render()
      } else {
        return <div>暂无数据</div>
      }
    }
  }