React.lazy例子

// OtherComponent.js

import React, { PureComponent } from "react";

class OtherComponent extends PureComponent {
  state = {
    arr: 60
  };
  render() {
    const { arr } = this.state;
    let list = [];
    for (let i = 0, len = arr; i < len; i++) {
      list.push(<li key={i}>{i}</li>);
    }

    return <ul>{list}</ul>;
  }
}
export default OtherComponent;

import React, { PureComponent, Suspense, Fragment } from "react";

const OtherComponent = React.lazy(() => import("./OtherComponent"));

class Child extends PureComponent {
  render() {
    return (
      <Suspense fallback={<div>Loading</div>}>
        <OtherComponent />
      </Suspense>
    );
  }
}

class ReactLazy extends PureComponent {
  state = {
    showChild: false
  };

  handleClick = () => {
    this.setState({
      showChild: true
    });
  };

  render() {
    const { showChild } = this.state;
    return (
      <Fragment>
        {showChild ? <Child /> : null}
        <button onClick={this.handleClick}>change</button>
      </Fragment>
    );
  }
}

export default ReactLazy;