使用React.lazy还是webpack动态导入？

Question

我想知道使用React.lazy()来“声明”动态导入和直接使用import()有什么区别：

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

或者使用Webpack的动态导入，就像这里解释的那样：https://webpack.js.org/guides/code-splitting/#dynamic-imports

(在我的情况下，我打算在Webpack中进行捆绑)

- Gambit2007

Answer 1

React.lazy 接收一个返回 Promise 的回调函数，并 返回 一个可渲染的组件。

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

- felixmosh

---

所以只是为了确保我理解 - 我不能使用Webpack动态导入组件吗？只能用于第三方库，因为那些动态导入的内容中没有可渲染的东西？ - Gambit2007

正确的，你不能渲染一个 Promise。 - felixmosh