reactjs - React Lazy 如何获取组件？

Question

我最近读到了关于 React Lazy 的内容以及当需要渲染组件时它如何在运行时“加载”组件。我假设这里的“加载”意味着从服务器获取组件然后渲染它。

所以我的问题是，React 如何管理组件的获取？它如何知道从何处获取该组件的确切路径(假设我们的代码将提及相对路径，但获取将需要完整的服务器路径)？它依赖于 Webpack 吗？

Answer 1

让我们看看 React 代码。 React.lazy 定义如下。

export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {
  let lazyType = {
    $$typeof: REACT_LAZY_TYPE,
    _ctor: ctor,
    // React uses these fields to store the result.
    _status: -1,
    _result: null,
  };

  if (__DEV__) {
    // ... additional code only in development mode
  }

  return lazyType;
}

如您所见，React.lazy 需要一个 Promise，该 Promise 解析为具有包含 React 组件的 default 导出的模块(由 React Docs 自由引用)。这也意味着不是 React 解析文件，而是 import() 解析文件。 import() 的工作方式如 MDN 中所述.

异步 ​​import() 是 ES6 中的一个新函数，并非在所有浏览器中都可用，但可以通过 Webpack 和 Babel/Typescript/其他进行填充。

你经常看到的是像下面这样的代码，Webpack会自动将导入的文件拆分开。

import(/* webpackChunkName: "xyz" */ './component/XYZ')

这会在您的捆绑脚本旁边创建一个新的 javascript xyz.js。

如果您不使用Webpack，则需要自己创建这些文件。 Webpack 只是减少了您所需的工作。所以你并不完全依赖 Webpack。这种方法可能如下所示:

// ./component/xyz.js
export default function() { return <div>Component</div> }

// ./main.js
const OtherComponent = React.lazy(() => import('./component/xyz.js'));
export default function() { return <div>Component</div> }

文件结构:

| public
|---| main.js
|---| component 
|---| --- | main.js

如您所见，不需要 webpack。它只会让您的生活更轻松。