标签: react-lazy-load

我正在使用 React 路由器根据特定的 url 呈现我的不同页面。不，我想使用React.lazy来延迟加载我所有的页面组件：

import React from "react";

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

const Page = React.lazy(() => {
  return import("./Page");
});

const App = () => {
  return (
    <Router>
      <React.Suspense fallback={<div>Loading page...</div>}>
        <Switch>
          <Route exact path="/">
            <h1>Home</h1>
            <Link to="/page">Go to another page</Link>
          </Route>

          <Route path="/page" component={Page} />
        </Switch>
      </React.Suspense>
    </Router>
  );
};

export default App;

这项工作非常好，但是当我转到 时，我的/page所有内容都Home消失了，我只能看到后备Loading page...组件（页面消失然后另一个页面很快出现，这让用户感到不安）。

这是默认的行为，React.Suspense但有在这种情况下，一种方法来保持呈现在屏幕上的实际主页用的 …

我正在使用此博客文章<React.Suspense>中的数据获取。\n来自反应文档

\n

Suspense 让你的组件在渲染之前等待一些东西。

\n

本文档中有更好的解释

\n

React.Suspense允许您指定加载指示器，以防其下方树中的某些组件尚未准备好渲染

\n

我了解到，<React.Suspense>如果组件尚未准备好渲染，则会显示指定为后备属性的加载指示器。

但是我不明白 React 如何检查组件是否准备好渲染。根据这个文档

\n

随着更多的数据流入，React 将重试渲染，每次它都可能能够进行 \xe2\x80\x9cdeeper\xe2\x80\x9d。

\n

这是否意味着当数据从网络请求流入时，React 也会重新渲染？
\n并<React.Suspense>不断检查组件是否准备好渲染？

在我的反应应用程序中，我使用React.lazy(() => import("...")). 但我无法实现支持延迟加载的测试用例。

如果没有React.lazy(() => import("..."))我的测试用例，则工作正常，但仅使用React.lazy它就无法工作。

请帮忙。

授权.jsx

import React, { Suspense } from "react";
import { Switch, Route } from "react-router-dom";

const SignIn = React.lazy(() => import("../../components/SignIn/SignIn"));

const Authentication = props => {
    return (
        <div id="wrapper" className="bg-gradient-primary">
            <Suspense fallback={<div>Loading...</div>}>
                <Switch>
                    <Route path="/sign-in" component={SignIn} />
                </Switch>
            </Suspense>
        </div>
    );
};

export default Authentication;

这是我的测试代码。

授权规范.jsx

import React from "react";
import { shallow } from "enzyme";
import Authentication from "./Authentication";
import SignIn from …

我一直在尝试创建一个 404 not found 页面并将所有不匹配的路由重定向到那里，当前配置为整个上下文：

<Switch>
  <Route path="/faq" component={FAQ}></Route>

  <Route path="/404">
    <NotFound />
  </Route>

  <Suspense fallback={<div>Loading ...</div>}>
    <Route path="/admin" component={AdminModule}></Route>
  </Suspense>

  <Redirect exact={true} from="*" to="/404" />
</Switch>

• 如果我将重定向组件移到带有延迟加载组件的悬念上方，我将无法再激活管理模块的路由。
• 如果我在 Suspense 之后移动所有内容，包括 /404，即使手动导航到 /404 路由，它也不再加载 NotFound 组件。

尝试了我在文档中找到的各种其他解决方案，但它们似乎都不起作用，这是设计使然还是错误？如果是设计使然，那么设计是什么？这似乎是每个应用程序都需要的用例。

我正在开发一个应用程序，如果下一页有任何尚未加载的延迟加载组件，我们希望在页面之间进行转换。所以我想弄清楚是否有任何方法可以可靠地检查延迟加载的组件是否已完成加载。

此解决方案有效，但仅在延迟加载的组件第一次尝试加载时才有效——即如果它立即呈现则无效，因为延迟加载的组件已经加载。

import React, {PropsWithChildren, useEffect} from 'react'

export default function SuspenseTrigger(props) {
  return (
    <React.Suspense fallback={
      <>
        {props.fallback}
        <Trigger onLoad={props.onLoad} onComplete={props.onComplete} />
      </>
    }>
      {props.children}
    </React.Suspense>
  )
}

function Trigger(props) {
  useEffect(() => {
    if (props.onLoad) {
      props.onLoad()
    }

    return () => {
      if (props.onComplete) {
        setTimeout(props.onComplete)
      }
    }
  }, [])

  return <></>
}

此组件调用正确onLoad和onComplete第一次它的加载。然而，在随后的时间里，因为延迟加载的组件现在被缓存，子组件会立即呈现，onLoad并且onComplete永远不会呈现回退，这意味着永远不会被调用。

我尝试过的一件事是将第二个Trigger放在 的主体中SuspenseTrigger：

function ensureLoadCompleteCalled() {
  onLoad()
  onComplete() …

我试图在我的源代码中采用 react-lazy 。但是不知道怎么回事..

我检查了两件事。

1. 查看 homeContainer 组件的导出方式。它是默认导出所以它不会影响使用惰性组件（导出默认 HomeContainer）
2. 我做了 Home Component 的控制台..它是 $$typeof: Symbol(react.lazy), _init, payload...我不知道是对的..可以吗？

当我执行我的应用程序时，我遇到了三个错误......但我找不到问题所在......

1. 未捕获未定义的 readLazyComponentType
2. （索引）：22 未捕获的类型错误：无法读取 index.22 处未定义的属性“包含”
3. 上述错误发生在您的 React 组件之一中：在未知中（由 Context.Consumer 创建）

在 App.tsx 中，我声明了基于路由的组件。我的模块版本是 react: 16.9.16, react-dom: 16.9.4

import React, {lazy, Suspense} from "react";
import {BrowserRouter,  Switch,  Route} from "react-router-dom";

const Home = lazy(() => import("./routes/Home/HomeContainer"));
console.log(Home)

.....

return (
<BaseLayout>
<Suspense fallback={<SpinContainer />}/>
 <Switch>
  <Route exact path={PATH.ROOT} component={Home}/>
   ... Other Routes ...
 </Switch>
</Suspense>
</BaseLayout>

...
...
)

const App: React.FC = …

直到几天前，我对 LazyLoad 的实现运行良好，但现在我似乎无法让它工作。

这是我的组件：

import React from 'react';
import LazyLoad from 'react-lazyload';
import './image.scss';

const Image = image => (

  <LazyLoad height={200} offset={100} once>

    <div
    className="image-container"
    orientation={image.orientation}>    

      <img
      className="image"
      src={image.url}
      alt={image.alt}
      />

      {'caption' in image &&
        <div className="meta">
          <p className="caption">{image.caption}</p>
          <p className="order">{image.currentNumber}/{image.maxNumber}</p>
        </div>
      }

    </div>

  </LazyLoad>  
)

export default Image

在 App.js 中，它是这样调用的：

render() {

        return (
            <div className="wrapper">

                <GalleryTop details={this.state.gallery_top} />

                {this.state.images.map((image, index) => <Image key={index} {...image} /> )}
          </div>
        )
    }

但它不会工作！演示环境如下： https //gifted-kare-1c0eba.netlify.com/

（检查检查器中的网络选项卡以查看所有图像都是从初始加载请求的）

还有一个视频在这里

知道我做错了什么吗？ …

当我尝试使用以下命令将一个 React 组件导入另一个组件时出现 TypeScript 错误React.lazy

模板/BugReport/index.tsx

import { useEffect, useContext } from 'react';
import BugReportStatic from '@tamm/ui-lib-v2-bug-report';
import baseUrl from 'client/utils/baseUrl';
import { StoreContext } from 'client/services/context';

function BugReport() {
  const store = useContext(StoreContext);
  useEffect(() => {
    BugReportStatic.init({
      bugReportIntegrationApi: `${baseUrl}/pub/feedback/bugReport`,
      store,
      isStore: !!store,
    });
    return () => {
      BugReportStatic.destroy();
    };
  }, []);
  return null;
}

export default BugReport;

模板/页脚/index.tsx

const BugReport = lazy(() =>
  import(/* webpackChunkName: "bug-report" */ 'client/templates/BugReport'),
);

Footer尽管我有默认导出，但我收到 TypeScript 错误BugReport

Type 'Promise<typeof import("/Users/hayksimonyan/Desktop/JTUpdates/dcd/src/client/templates/BugReport/index")>' is …