时间戳

首页 > 解决方案 > 如何在 React 中制作延迟加载高阶组件

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

问题描述

所以这里是主要思想，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>
    )
  }
}

标签： reactjsreact-hooksreact-hoc

解决方案

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

推荐阅读