React 延时加载组件的实现

6 min read

React 延时加载组件的实现

延迟加载是一种设计模式，会延迟对象或资源的加载或初始化，直到需要它们为止。这极大地提高了性能。在React示例中，减少的包大小可以导致更快的初始加载时间，这在如今用户等待耐心持续减少的情况下至关重要。

幸运的是，React很容易实现延迟加载。你需要做的就是使用React.lazy
包动态导入语句import()。

假设我们有一个Counter.js文件：

// Counter.js
import { useState } from 'React'

const Counter = () => {
  const [count, setCount] = useState('');

  const increment = () => setCount(count => count + 1);
  const decrement = () => setCount(count => count - 1);

  return (
    <div>
      <button onClick={decrement}> - <button>
      <span> {count} <span>
      <button onClick={increment}> + <button>
    </div>
  );
};

在App.js中延迟加载此counter：

// App.js
import { lazy } from 'React'

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

const App = () => {
  return (
    <div>
    <Suspense fallback={<Loader />}>
        <Counter />
    </Suspense>
    </div>
  );
};

Counter仅在需要时才会延迟加载，并且在加载时显示Loader组件。