2018年06月13日

Reactでasyncコンポーネントを作成して非同期で読み込みを行う

以下のようなコンポーネントをAsyncComponent.jsなどとして作成
async / awaitを利用して呼び出し時に引数で指定されたコンポーネントの呼び出しを行います。

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);

this.state = {
component: null
};
}

async componentDidMount() {
const { default: component } = await importComponent();

this.setState({
component: component
});
}

render() {
const C = this.state.component;

return C ? <C {...this.props} /> : null;
}
}

return AsyncComponent;
}


ルーティング時に呼び出したいコンポーネントを利用できるようにしておきます

render(
<div>
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Switch>
<Route
exact
path="/a"
component={asyncComponent(() =>
import('./App1')
)}
/>
<Route
path="/b"
component={asyncComponent(() =>
import('./App2')
)}
/>
<Route
path="/c"
component={asyncComponent(() =>
import('./App3')
)}
/>
<Redirect to="/a" />
</Switch>
</div>
</ConnectedRouter>
</Provider>
</div>,
document.getElementById('root')
);


via : https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
タグ:async REACT await
posted by ねこまんま at 12:38 | Comment(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。