Question

我正在使用React钩子，我希望我的组件在显示它之前实际完成整个加载。

我当前的解决方案是这样的：

import React, {useState, useEffect} from 'react'
import Main from './Main'

export default function Container() {

     const [isLoading, setisLoading] = useState(false);

     useEffect(() => {
        setTimeout(() => setisLoading(true), 1000)
     })

return (
        <div>
           {(isLoading) ? <Main/> : <h1>I'm currently loading</h1>}
        </div>
      );
}

这里的问题是它加载了1秒钟，然后显示了我的 Main.js 组件，该组件需要大约2秒钟的时间才能加载。我希望在显示组件之前完成实际加载。

Answer 1

您可以尝试react lazy loading

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Answer 2

您应该设置正确的导入和代码拆分方式。

适用于此的良好指南和库，您可以在这里找到：https://github.com/jamiebuilds/react-loadable

如果要自己创建它，可以编写如下代码：

export default function Container() {

     const [Main, setMain] = useState(null);

     useEffect(() => {
           import('/path/to/main').then(main => setMain(main));
     }, [])

return (
        <div>
           {(isLoading) ? <Main/> : <h1>I'm currently loading</h1>}
        </div>
      );
}

此变体在客户端和服务器端均适用。

您还可以使用React.lazy，但不适用于服务器端渲染

Answer 3

您拥有的一切都很好，您只需将加载状态倒退即可。默认情况下，将加载设置为true，然后在1000毫秒后将其设置为false。

当加载为true时，显示您的加载消息，然后显示您的组件。

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Main() {
  return <h1>I'm a main component</h1>;
}

export default function Container() {
  const [isLoading, setisLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setisLoading(false), 1000);
  });

  return <div>{isLoading ? <h1>I'm currently loading</h1> : <Main />}</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Container />, rootElement);

在显示之前使React组件加载

3 个答案: