react 懒加载

React懒加载是一种优化性能的技术，通过按需加载组件或模块，减少初始加载时间，提升用户体验。解决方案主要是利用React提供的React.lazy和Suspense组件，或者使用动态导入结合路由实现懒加载。

使用React.lazy与Suspense

React官方提供了React.lazy和Suspense来实现懒加载。React.lazy用于定义一个延迟加载的组件，而Suspense则用于在组件加载完成前显示一个占位符。

示例代码

jsx
import React, { Suspense } from 'react';</p>

<p>// 使用 React.lazy 定义懒加载组件
const LazyComponent = React.lazy(() => import('./LazyComponent'));</p>

<p>function App() {
  return (
    <div>
      <h1>主页面内容</h1>
      {/* 使用 Suspense 包裹懒加载组件 */}
      <Suspense fallback={<div>加载中...</div>}>
        
      
    </div>
  );
}</p>

<p>export default App;

在这个例子中，当应用首次加载时，LazyComponent不会立即加载，只有当它需要渲染时才会被加载，从而减少了初始加载时间。

基于路由的懒加载

另一种常见的懒加载方式是结合React Router实现基于路由的懒加载。这种方式适用于大型应用，可以按需加载不同的页面组件。

示例代码

jsx
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';</p>

<p>// 动态导入组件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));</p>

<p>function App() {
  return (
    
      <Suspense fallback={<div>页面加载中...</div>}>
        
          <Route path="/" element={} />
          <Route path="/about" element={} />
        
      
    
  );
}</p>

<p>export default App;

这里我们通过lazy函数动态导入组件，并用Suspense包裹整个路由配置。这样，只有当用户访问特定路由时，对应的组件才会被加载。

自定义懒加载钩子

为了更灵活地控制懒加载行为，我们可以创建自定义钩子来封装懒加载逻辑。

示例代码

jsx
import React, { useState, useEffect } from 'react';</p>

<p>function useLazyLoad(Component) {
  const [LazyComponent, setLazyComponent] = useState(null);</p>

<p>useEffect(() => {
    Component().then((mod) => {
      setLazyComponent(mod.default);
    });
  }, [Component]);</p>

<p>return LazyComponent;
}</p>

<p>function App() {
  const LazyComponent = useLazyLoad(() => import('./LazyComponent'));</p>

<p>return (
    <div>
      <h1>主页面内容</h1>
      {LazyComponent ?  : <div>加载中...</div>}
    </div>
  );
}</p>

<p>export default App;

通过自定义钩子useLazyLoad，我们可以更加灵活地控制组件的加载时机，同时保持代码的可读性和复用性。

以上就是几种React懒加载的实现方法，每种方法都有其适用场景，开发者可以根据实际需求选择合适的方案。