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会解析为带有default导出的模块，其中包含一个React组件（由React Docs自由引用）。这也意味着不是React解析文件，而是import()解析文件。 import()的工作方式如MDN中所述。

异步import()是ES6中的一项新功能，并非在所有浏览器中都可用，但可以由Webpack和Babel / Typescript / others进行填充。

您通常会看到类似以下的代码，该代码会自动通过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。这只会使您的生活更轻松。

React Lazy如何获取组件？

1 个答案: