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

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

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

Answer 2

我不明白你为什么要用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')));

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

How to make a lazy loading high order component in React

reactjs

react-hooks

react-hoc