如何将React.lazy对象转为JSX元素？滚动懒加载疑问

一、当前写法是否会提前导入组件？ #

不会。你发起组件导入的import(...)调用被包裹在useEffect的if(isImported)分支里，只有当isImported为true（也就是滚动触发后）才会执行这个导入语句，发起资源请求。未滚动时该分支不会执行，因此不会提前加载组件。

二、如何正确实现滚动触发懒加载并渲染组件？ #

你的写法存在两个核心问题：一是渲染时用了小写的组件名（React会把小写开头的元素识别为原生HTML标签，而非React组件）；二是没必要将React.lazy的结果存入状态，正确的做法是用布尔状态控制组件是否渲染，同时规范组件使用方式。

正确实现步骤： #

1. 在组件顶层声明懒加载组件
   直接用React.lazy声明目标组件，这一步不会立即触发导入，只有当组件被渲染时才会发起资源请求：

import React, { useState, useEffect, Suspense } from 'react';
import styled from 'styled-components';

// 顶层声明懒加载的GoogleMap组件
const LazyGoogleMap = React.lazy(() => import('../../components/DynamicLandingPages/GoogleMap'));

// 复用加载占位的样式组件
const GoogleMapWrapper = styled.div`
    height: 40vh; 
    width: 60vw;
    margin: 50px auto;
    border: 1px solid red;
`;

2. 用状态控制组件渲染时机
   声明一个布尔状态shouldLoadMap，初始为false，当滚动触发条件满足时切换为true，同时移除滚动监听：

function ParentComponent() {
    const [shouldLoadMap, setShouldLoadMap] = useState(false);

    // 滚动监听函数，可自定义触发条件
    const scrollDetector = () => {
        // 示例：滚动距离超过窗口高度一半时触发加载
        if (window.scrollY > window.innerHeight / 2) {
            setShouldLoadMap(true);
            window.removeEventListener('scroll', scrollDetector);
        }
    };

    useEffect(() => {
        window.addEventListener('scroll', scrollDetector);
        // 组件卸载时移除监听
        return () => window.removeEventListener('scroll', scrollDetector);
    }, []);

3. 配合Suspense渲染组件
   用Suspense包裹懒加载组件，提供加载占位内容，仅当shouldLoadMap为true时渲染目标组件：

return (
        <div>
            {/* 页面其他内容 */}
            <Suspense fallback={<GoogleMapWrapper>地图加载中...</GoogleMapWrapper>}>
                {shouldLoadMap && <LazyGoogleMap />}
            </Suspense>
        </div>
    );
}

export default ParentComponent;

原写法无法渲染的原因 #

• 你将React.lazy返回的对象存入googleMapComponent状态后，渲染时用了<googleMapComponent />——React要求组件名必须大写开头，小写会被识别为原生HTML标签，无法正常渲染。
• 无需将React.lazy的结果存入状态，直接通过布尔状态控制渲染时机更简洁，也符合React的设计逻辑。

额外优化：用Intersection Observer实现视口触发 #

如果希望组件进入视口时再加载，推荐使用Intersection Observer API代替滚动监听，性能更优：

function ParentComponent() {
    const [shouldLoadMap, setShouldLoadMap] = useState(false);
    const mapPlaceholderRef = useRef(null);

    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                setShouldLoadMap(true);
                observer.unobserve(mapPlaceholderRef.current);
            }
        });
        
        if (mapPlaceholderRef.current) {
            observer.observe(mapPlaceholderRef.current);
        }
        
        return () => observer.disconnect();
    }, []);

    return (
        <div>
            {/* 占位容器，用于监听是否进入视口 */}
            <div ref={mapPlaceholderRef} style={{ height: '40vh', width: '60vw', margin: '50px auto' }}>
                <Suspense fallback={<GoogleMapWrapper>地图加载中...</GoogleMapWrapper>}>
                    {shouldLoadMap && <LazyGoogleMap />}
                </Suspense>
            </div>
        </div>
    );
}

内容的提问来源于stack exchange，提问作者user19887511