异步组件

使用

React.lazy ： 指定组件是异步加载的
React.Suspense：赋予当前异步加载的组件，动态更新的能力。当组件还没挂在的时候，显示loading，组件动态载入好了显示原本组件样子；

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

常见使用场景是，配合react-router，实现动态加载该异步组件

大致实现原理

• 第一次请求没有缓存, 子组件 throw 一个 thenable 对象, Suspense 组件内的 componentDidCatch 捕获之, 此时展示 Loading 组件;
• 当 Promise 态的对象变为完成态后, 页面刷新此时 resource.read() 获取到相应完成态的值;
• 之后如果相同参数的请求, 则走 LRU 缓存算法, 跳过 Loading 组件返回结果