React使用Suspense，lazy 异步加载组件[性能优化]

React.lazy

React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。

import React, { lazy, Suspense } from 'react';
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );}

Suspense

这样做就完成了组件的异步加载，但是这样做有个问题那就是：
如果在 Home 渲染完成后，包含 OtherComponent 的模块还没有被加载完成，我们可以使用加载指示器为此组件做优雅降级。这里我们使用 Suspense 组件来解决。

import React, { lazy, Suspense } from 'react';

import HooksCount from './components/hookCount'
const Count = lazy(() => import('./components/count')
)

function Loading() {
  return <div>loading...</div>
}
function App() {
  return (
    <div className="App">
      <Suspense fallback={<Loading />}>
        {/* <Suspense fallback={<div>加载中</div>}> */}
        <Count></Count>
      </Suspense>

      <HooksCount></HooksCount>
    </div>
  );
}

export default App;