Skip to content

React 加载异步组件(高级)

异步组件

  • import
  • React.lazy
  • React.Suspense

例子

js
import React from 'react';

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

class LazyDemo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <p>引入一个动态组件</p>
        <hr />
        <React.Suspense fallback={<div>Loading...</div>}>
          <ContextDemo></ContextDemo>
        </React.Suspense>
      </div>
    );

    // 1、强制刷新,可以看到 loading (看不到就限制一下 chrome 网速)
    // 2、看 network 的 js 加载
  }
}

export default LazyDemo;

基于 MIT 许可发布