标签: react-suspense

React 本身引入了使用 Suspense 和 Lazy 的代码分割和异步路由的新概念。有了这个概念，我们如何才能在路线改变时在页面顶部显示进度条呢？我可以显示加载图标、文本等，但不能显示进度条（0 到 100%）。这是我的做法

const About = lazyLoading(() => import("./components/About"), {
  fallback: <h1>Loading...</h1>
});
const Home = lazyLoading(() => import("./components/Home"), {
  fallback: <h1>Loading...</h1>
});

const BasicExample = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" render={() => <Home name="hello" />} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};
render(<BasicExample />, document.getElementById("root"));

延迟加载.js

const lazyloading = (importFunc, { fallback = null }) …

例如我有这样的声明：

场景一：

const ComponentA = lazy(() => import('pages/ComponentA'));
const ComponentB = lazy(() => import('pages/ComponentB'));

<Router>
  <Switch>
     <Suspense fallback={'loading...'}>
       <Route path="/A" component={ComponentA} exact/>
       <Route path="/B" component={ComponentB} exact/> 
     </Suspense>
  </Switch>
</Router>

如果 的加载依赖性仅为ComponentA1，则这种情况就很好。

但对于场景 2：如果我有多重依赖怎么办ComponentA？

代码2

import Dependency1 from 'component/dependency1';
import Dependency2 from 'component/dependency2';

const ComponentA = () => {
   return (
     <div>
       <Dependency1/>
       <Dependency2/>
     </div>
   );
}

可以将每个依赖项的 Suspense 声明分开吗？像这样：

代码3

 const Dependency1 = lazy(() => import('component/dependency1'));
 const Dependency2 = lazy(() => import('component/dependency2'));

 const ComponentA = () …

我正在尝试学习 React 18 中的一些新功能，例如SuspenseList和 newuseId钩子，但我似乎一遍又一遍地遇到相同的错误：

Module '"react"' has no exported member 'SuspenseList'.  TS2305

这是我的 package.json 的样子：

Module '"react"' has no exported member 'SuspenseList'.  TS2305

我现在不知道该怎么做，因为我已经安装了 React 18 的 RC 版本，根据工作组 GitHub 讨论板，这应该是最新版本。

新的 Relay hooks API 将重点放在“render-as-you-fetch”的 React 模式上，到目前为止我真的很喜欢这个。继电器useQueryLoader和usePreloadedQuery钩子使得大多数时候的实现都非常简单。

然而，我正在努力寻找一个关于如何在路由方面实现此模式的良好模式。我发现有两种典型情况使得此方法难以实施。

情况一：

1. 用户加载主页 ( example.com/)
2. 用户深入应用程序树的一部分 ( example.com/settings/user/security/authentication)
3. 然后，他们单击链接将其带到应用程序中完全不相关的部分 ( example.com/blog/post-1)

情况B：

1. 用户使用 URL 栏转到应用程序的某个部分，而不是使用链接 ( example.com/blog/post-1)

这些示例有两种结果，即用户example.com/blog/post-1通过嵌套子组件或直接通过 URL 访问路由 ( )。因此，我们为此路线获取数据的方式必须支持这两种方法。

我假设我们希望尽早触发此路由的获取，因此当用户单击链接或我们在页面加载时检测到此路由时。

我可以想到三个想法来实现这一点：

1. 使用fetch-then-render模式代替（例如 Relay 的useLazyLoadQueryhook）
2. 存储一个函数（例如在上下文中），并让该路由的所有链接在其onClick方法中调用该函数，并且useEffect如果没有加载数据，或者查询的引用已过时，则该路由也有一个调用该函数的函数
3. 使用render-as-you-fetch函数但实现它们来fetch-then-render支持

方法一：

这违背了模式的目的render-as-you-fetch，但是这是一种简单的方法，并且更有可能是实现获取路由数据的“更干净”的方法。

方法2：

在实践中我发现这很难实现。通常，转到路由的链接与组件渲染路由所在的组件树部分断开连接。使用上下文意味着我必须管理loadData特定路线的不同功能（当涉及变量等时，这可能会很棘手）。

方法三：

这就是我目前一直在做的事情。在实践中，它通常会导致能够将加载数据函数传递到附近的组件，但是，如果路由由断开连接的组件、URL 或页面重新加载等访问，则组件会回退到调用加载钩子中的数据函数useEffect。

有没有人对他们如何实现这一点有任何其他想法或例子？