React.lazy 不加载任何组件

Question

我正在尝试在 React 应用程序中实现一些代码拆分。在这种情况下，这并不是绝对必要的，因为它是一个相当小的应用程序，但我想我会先在低风险环境中尝试这种技术，然后再在更大的项目中实施它。

我的代码有效：

import React from 'react'
import { useUser } from './context/userContext'
import Layout from './components/layout'
import Routes from './components/routes'
import LandingScreen from './components/authApp/LandingScreen'

const App = () => {
  const user = useUser()

  return (
    <>
      {user ? (
        <Layout>
          <Routes />
        </Layout>
      ) : (
        <LandingScreen />
      )}
    </>
  )
}

export default App

如果我尝试更改任何组件以使用 React.lazy，例如

const LandingScreen = React.lazy(() => import('./components/authApp/landingScreen'))

我的应用编译正常，但浏览器中没有呈现任何组件，我收到此错误：

index.js:1 The above error occurred in one of your React components:
    in Unknown (at App.js:26)
    in App (at src/index.js:14)
    in UserProvider (at appProvider.js:7)
    in AuthProvider (at appProvider.js:6)
    in AppProviders (at src/index.js:13)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries.

如果我在这里做错了什么，我将不胜感激。 LandingScreen 组件只是渲染了一些 div 和我的登录组件，但是即使它只是渲染单个 div 也会出现同样的错误。'

编辑：将延迟加载的组件包装在 Suspense 组件中修复它。文档似乎表明 Suspense 组件是可选的，但也许不是？任何知道更多并且可以加入的人，将不胜感激。

Answer 1

lazy 组件应该是Suspense 的后代，如果您使用Suspense，那么您需要提供fallback： p>

All right here in the docs

const App = () => {
  const user = useUser()

  return (
    <Suspense fallback={<></>}>
      {user ? (
        <Layout>
          <Routes />
        </Layout>
      ) : (
        <LandingScreen />
      )}
    </Suspense>
  )
}

注意：你没有有使用Suspense，但如果你没有，那么你基本上必须用你自己的ErrorBoundary重新发明它，所以更容易使用它。

悬念陷阱

如果Suspense 下的任何组件在渲染时挂起（例如lazy），那么直到最近的 Suspense 的整个组件树都会在组件准备好时卸载并重新挂载。这可能是个大问题。

Suspense 实际上在做什么？

React 一直在抛出这个想法，组件可以throw 一个 Promise -throw 在这里非常重要，它不能返回一个Promise，它必须 throw它 - 表示它是“异步的”。如果最近的ErrorBoundary（Suspense 是）捕获了Promise，那么它显示它是fallback 属性。当它捕获的 Promise 解析时，它会呈现为 children - 当您考虑它实际在做什么时，这非常简单。

我说它一直在玩弄这个想法，因为即使他们已经为Suspense 实现了它，他们也将它视为用于数据加载的 API，事实上，人们已经证明你可以使用它现在就这样（现在找不到链接，但它超级酷）。

The API for data fetching is expected to be formalized sometime in the near future.