如何在反应中有条件地延迟加载动态导入？

Question

我想仅在加载图像后触发 React 组件的动态导入以优先进行首次绘制。问题是，它是一个上下文提供程序组件，因此遇到了一些麻烦。

所以我在文件 auth.js:

中有一个动态导入

   const AuthContextPreloader = hasWindow
   ? lazy(() => import("./AuthContextPreloader"))
   : null;

我在单独的组件中有一张图片：

   <img
      ref={() => hasWindow && imageLoaded()}
      className={styles.optionsImageImg}
      alt={"nav"}
      src={didLoad && thumb.jpg}
      type="image/jpeg"
    />

一旦加载，我就会在组件树上发送一个状态以传递给 AuthContextPreloader

    const imageLoaded = () => {
      setheroLoaded(true);
     };

一些伪代码来尝试在 auth.js 中实现这一点：

  useEffect(() => {
    props.heroLoaded && **trigger the lazyload**;
  }, [props.heroLoaded]);

但完全不确定如何实施。谢谢。

Answer 1

您不必担心何时加载您的组件。您应该关心何时渲染它。类似的东西：

const AuthContextPreloader = hasWindow
  ? lazy(() => import("./AuthContextPreloader"))
  : null;

function ComponentWhereWouldBeRenderedAuthContextPreloader(props) {
  return props.heroLoaded ? <Suspense><AuthContextPreloader /> </Suspense> : null;
}

这样你就不会考虑自己的内部结构，而是呈现你当前的应用程序状态。

编辑

从评论中可以清楚地看出，您关心的不是组件本身，而是很大的依赖性。

在这种情况下，您可以这样做：


function ComponentWhereWouldBeRenderedAuthContextPreloader(props) {
  return props.heroLoaded ? <AuthContextPreloader /> : null;
}

function AuthContextPreloader(props) {
  let [dependencyState, setDependencyState] = useState("not_loaded");
  useEffect(function () {
    import("large-dependency")
      .then(function (module) {
        // return either default, or named exports that you need, or skip this step
        return module.default;
      })
      .then(function (dep) {
        // do something with dependency and then change state
        setDependencyState("loaded");
      });
  }, []);
  if (depenencyState === "not_loaded") return null;
  return ...;
}

如何在反应中有条件地延迟加载动态导入？

How to conditionally lazy load dynamic imports in react?

javascript

lazy-loading

reactjs

编辑