Question

因此，这里的主要思想是HOC，它能够使用React.lazy和React.Suspense加载任何包装在组件中的东西。可能吗？？？所以，我已经能够写一些，但是不确定我是否能够正确编写...

import React, { Suspense, lazy, useState, useEffect } from "react"

export function withLazyImport(LazyComponent) {
  return (props) => {
    const [loadedComponent, setLoadedComponent] = useState(null)

    useEffect(() => {
      setLoadedComponent(lazy(() => import(<LazyComponent {...props} />)))
      //eslint-disable-next-line
    }, [])

    return (
      <Suspense fallback="Lazy component is loading ...">
        {loadedComponent}
      </Suspense>
    )
  }
}

Answer 1

我不明白你为什么使用 useEffect。结果组件不会将新的 props 传递给惰性组件，因为 props 是在 did mount 上传递的。

我根据这个问题的作者提供的例子想出了另一个解决方案

import React, { Suspense } from 'react';

export const withLazyComponent = (LazyComponent) => {
  return (props) => (
    <Suspense fallback="Lazy component is loading ...">
      <LazyComponent {...props} />
    </Suspense>
  )
}

然后你像这样使用它：

const LazyComponent = withLazyComponent(React.lazy(() => import('path/to/component')));

Answer 2

您可以尝试使用现有的解决方案，例如Loadable Components

如何在React中制作延迟加载的高阶组件

2 个答案: