React - 在 1 Suspense 中包装懒惰路由与每个懒惰路由组件的单独悬念之间的区别

Question

我正在像这样使用 React JS 代码拆分

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

我想问一下，将组件包装成 1 个悬念与像这样将惰性组件包装成悬念之间有什么区别。哪个性能更好

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
   
      <Routes>
        <Route path="/" element={
            <Suspense fallback={<div>Loading...</div>}><Home />
            </Suspense>}
            
        />
        <Route path="/about" element={
                <Suspense fallback={<div>Loading...</div>}>
                <About />
                </Suspense>} 
        />
      </Routes>
    
  </Router>
);

Answer 1

差别不大。它只是更改在等待加载完成时卸载哪些组件。如果您想在加载期间隐藏某些 dom 元素，这可能很重要，但您唯一关心的部分（加载 div）在两种情况下都会显示。 #1 将卸载 <Route>s，因此它们什么也不显示； #2 将保留 <Routes>，但它们仍然不会显示任何内容（除了加载指示器）

Which is better for performace

无论哪个更快，它只会有一点点。这不是您需要关注性能的领域。我会说如果你想为不同的路线显示不同的加载占位符，或者如果其中一些不是延迟加载，那么执行#2。否则，执行#1。

Answer 2

使用第一种方法将帮助您对所有组件使用相同的回退 UI：Home、About.

使用第二种方法将帮助您为每个组件自定义回退 UI：

<Routes>
  <Route
    path="/"
    element={
      <Suspense fallback={<div>Loading component Home...</div>}>
        <Home />
      </Suspense>
    }
  />
  <Route
    path="/about"
    element={
      <Suspense fallback={<div>Loading component About...</div>}>
        <About />
      </Suspense>
    }
  />
</Routes>

如果您的目标是在所有组件之间显示相同的 UI，我建议使用第一种方法，因为每次更新组件 App 时，它只会更新组件 Suspense，否则第二种方法需要卸载和安装component悬念。

React - 在 1 Suspense 中包装懒惰路由与每个懒惰路由组件的单独悬念之间的区别

React - Difference between Wrapping Lazy Routes in 1 Suspense vs Separate suspense for each lazy route component

reactjs

react-router-dom