反应中的延迟加载 - 组件未加载

Question

有人可以解释为什么我的懒加载组件永远不会加载吗？

所看到的只是消息加载...在屏幕上...并且没有错误。

下面是我的代码：

import React, { Component, lazy, Suspense } from "react";
import "./App.css";
//const Mycomp = lazy(() => import("./components/myComp"));
const Mycomp = lazy(() => {
  let x = new Promise(
    () => {
      import("./components/myComp");
    },
    e => {
      console.log(e);
    }
  );
  return x;
});

class App extends Component {
  sayHi = () => {
    console.log("supa");
  };

  render() {
    return (
      <Suspense fallback={<div> loading...</div>}>
        <div className="App">
          <header className="App-header">
            <Mycomp />
            <input type="button" value="sayHi" onClick={this.sayHi} />
          </header>
        </div>
      </Suspense>
    );
  }
}

export default App;

这只是为了学习目的..所以请善待..我对一般的反应不是很熟悉......

下面是 myComp.jsx 的代码：

import React, { Component } from "react";

class Mycomp extends Component {
  state = {};
  render() {
    return <div>Hi i'm loaded now.</div>;
  }
}

export default Mycomp;

Answer 1

来自反应文档。

React.lazy 采用必须调用动态 import() 的函数。这必须返回一个 Promise，该 Promise 解析为具有包含 React 组件的默认导出的模块。

现在它很微妙，但我认为在你的情况下，你正在返回你自己新创建的已分配给的承诺x。然而，您没有具体说明这个承诺的具体内容。React 需要您返回一个承诺，该承诺解析为具有默认导出的组件。

我认为您可以对代码进行一点小小的更改即可使其正常工作。

const Mycomp = lazy(() => {
   return import("./components/myComp");
});

动态导入已经返回一个承诺，该承诺解析为具有默认导出的组件，因此我认为您将其包装在您自己返回的承诺中，从而将其抛弃。

这是反应文档中的示例。

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

这是一些示例代码，显示如何添加超时。

const OtherComponent = React.lazy(() => {
  const x = new Promise((resolve) => {
    setTimeout(() => {
      return resolve(import("./Child"))
    }, 1500)
  })
  return x;
});

class App extends Component {
  render() {
    return (
      <div className="App">
        <Suspense fallback={<div>Loading...</div>}>
          <OtherComponent />
        </Suspense>
      </div>
    );
  }
}