// 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;