Question

我想知道使用.来“声明”动态导入的区别是什么：

React.lazy()

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

（就我而言，我正打算在webpack中捆绑）

Answer 1

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

Webpacks动态导入返回一个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;
  }
}

使用React.lazy与Webpack动态导入？

1 个答案: