如何使用 React/Next js 站点的 useEffect hook 延迟加载映射组件

Question

我在我的Next js网站的索引页面上放置了一个Google Maps API组件，但它将负载减慢了一个疯狂的数量（大约500毫秒）。有没有办法让组件延迟到使用useEffect钩子或以另一种简洁的方式加载页面之后？我想提高网站的加载速度（和性能分数）。export default function Home() {  return (    <div className={styles.main}>      <Layout>        <main className={styles.content}>           **<div className={styles.mapContainer}>            <Map  className={styles.map}/>**          </div>        </main>      </Layout>    </div>  )}

Answer 1

接下来.js提供了一个帮助程序，该帮助程序仅在组件呈现到页面时加载该组件。dynamic

https://nextjs.org/docs/advanced-features/dynamic-import

import dynamic from 'next/dynamic'

const Map = dynamic(() => import('components/MapOrWhatever'));

export default function Home() {

  return (

    <div className={styles.main}>

      <Layout>

        <main className={styles.content}> 

          <div className={styles.mapContainer}>

            <Map  className={styles.map}/>

          </div>

        </main>

      </Layout>

    </div>

  )

}

您还可以将函数的选项指定为第二个参数：dynamic

const Map = dynamic(() => import('components/MapOrWhatever'), {

    ssr: false, // do not render this on the server side render

    loading: () => <div>Loading Map...</div>, // placeholder component

});

如果要将组件的渲染延迟（并因此加载）到特定时间，那么是的，您可以使用效果或其他挂钩来切换地图渲染。例如：

export default function Home() {

  const [showMap, setShowMap] = React.useState(false);

  React.useEffect(() => {

    // Set the map to load 2 seconds after first render

    const timeOut = setTimeout(() => setShowMap(true), 2000);

    return () => clearTimeout(timeOut);

  }, []);

  // <Map> will only load when showMap is true

  return (

    <div className={styles.main}>

      <Layout>

        <main className={styles.content}> 

          {showMap && <div className={styles.mapContainer}>

            <Map  className={styles.map}/>

          </div>}

        </main>

      </Layout>

    </div>

  )

}

在实践中，最好动态加载隐藏在某种交互背后的组件，例如更改应用程序中的选项卡以加载新路线，或单击“查看地图”按钮。把它放在后面并不是很有成效，你只是人为地任意延迟组件的加载，而没有真正考虑过。但是，我将其作为示例包含在内，以展示动态组件如何仅在它们应该呈现时才加载。setTimeout