当前位置：首页 > React

react中如何实现懒加载

2026-01-25 07:58:04React

实现懒加载的几种方法

在React中实现懒加载可以有效提升应用性能，减少初始加载时间。以下是几种常见方法：

使用React.lazy和Suspense

React.lazy函数允许动态导入组件，结合Suspense组件实现懒加载。适用于React 16.6及以上版本。

react中如何实现懒加载

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

基于路由的懒加载

在React Router中实现按路由懒加载，结合React.lazy使用：

react中如何实现懒加载

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./routes/Home'));
const About = React.lazy(() => import('./routes/About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

图片懒加载

对于图片资源，可以使用Intersection Observer API或第三方库：

import { useState, useEffect, useRef } from 'react';

function LazyImage({ src, alt }) {
  const [isLoaded, setIsLoaded] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setIsLoaded(true);
          observer.unobserve(entry.target);
        }
      });
    });

    observer.observe(imgRef.current);
    return () => observer.disconnect();
  }, []);

  return (
    <img
      ref={imgRef}
      src={isLoaded ? src : ''}
      alt={alt}
      style={{ opacity: isLoaded ? 1 : 0, transition: 'opacity 0.3s' }}
    />
  );
}

自定义懒加载Hook

可以创建自定义Hook实现更灵活的懒加载逻辑：

import { useState, useEffect } from 'react';

function useLazyLoad(ref) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsVisible(true);
        observer.disconnect();
      }
    });

    observer.observe(ref.current);
    return () => observer.disconnect();
  }, [ref]);

  return isVisible;
}

function LazyComponentWrapper() {
  const ref = useRef();
  const isVisible = useLazyLoad(ref);

  return (
    <div ref={ref}>
      {isVisible && <ExpensiveComponent />}
    </div>
  );
}