react lazyLoad在移动端的应用技巧

发布时间:2024-10-16 00:28:58

阅读量:184

React.lazy() 和 React.Suspense 可以用来实现组件的懒加载，从而优化移动端的性能。以下是一些在移动端应用中实现懒加载的技巧：

使用 React.lazy() 动态导入组件：

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

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

使用 React.memo() 优化懒加载组件的性能：

import React, { lazy, Suspense, memo } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

const MemoizedMyComponent = memo(MyComponent);

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

使用 Intersection Observer API 监听组件的可见性，从而实现懒加载：

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

const MyComponent = lazy(() => import('./MyComponent'));

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

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

    if (isVisible) {
      observer.observe(document.querySelector('.lazy-load-container'));
    }

    return () => {
      if (isVisible) {
        observer.unobserve(document.querySelector('.lazy-load-container'));
      }
    };
  }, [isVisible]);

  return (
    <div>
      {isVisible && <MyComponent />}
    </div>
  );
}

使用 React Router 实现路由级别的懒加载：

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

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

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

使用 Webpack 的代码分割功能实现懒加载：

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

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