时间戳

首页 > 解决方案 > 使用 React.lazy 与 webpack 动态导入？

reactjs - 使用 React.lazy 与 webpack 动态导入？

问题描述

我想知道使用如下“声明”动态导入有什么区别React.lazy()：

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

或者使用 webpack 的动态导入来执行此操作，如下所述： https ://webpack.js.org/guides/code-splitting/#dynamic-imports

（就我而言，无论如何我都打算在 webpack 中进行捆绑）

标签： reactjswebpack

解决方案

React.lazy获取一个返回 Promise 的回调，并返回一个可渲染组件。

Webpacks 动态导入返回一个 Promise，该 Promise 将在加载块时解析，因此，您不能直接渲染它。

你可以重新实现React.lazy，这是真正的基本实现。

class SomeComponent extends React.Component {
  state = {LazyComponent: null};

  async componentDidMount() {
    const LazyComponent = await import('./path/to/LazyComponent');
    this.setState({LazyComponent});
  }
  render() {
    const {LazyComponent} = this.state;
    return LazyComponent ? <LazyComponent {...props} /> : null;
  }
}

推荐阅读