【React】通过动态加载组件

1 年 ago

清, 扬

1 minute

使用React.lazy()来动态加载组件。

React.lazy()是在React 16.6.0版本引入的一个功能，它提供了一种方便的方式来动态加载组件。通过使用它，我们可以优化应用的初始加载时间，并且只在需要时加载所需的组件。

1. React.lazy()是什么？

React.lazy()是一个支持动态导入的函数，用于生成可以进行延迟加载的组件。通常，组件会使用import语句进行直接加载，但使用React.lazy()后，该组件将应用代码分割（code-splitting），并在需要时以异步方式进行加载。

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

2. React.lazy()的基本用法

以下是React.lazy()的基本使用方式。

import React from "react";

const MyComponent = () => {
  return <div>Hello, React!</div>;
};

export default MyComponent;

import "./App.css";
import React, { lazy, Suspense } from "react";

const MyComponent = lazy(() => import("./components/MyComponent"));

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

export default App;

在上述例子中，使用React.lazy()动态加载了MyComponent组件。Suspense组件指定了在延迟加载期间显示的加载提示信息。

3. 通过悬念处理错误

Suspense不仅用于处理异步组件加载时的加载动画，还可以用于处理错误。如果在异步组件加载期间出现错误，Suspense会显示错误组件，例如，而不是显示指定在fallback属性中的加载信息。

import "./App.css";
import React, { lazy, Suspense } from "react";

const MyComponent = lazy(() => import("./components/MyComponent"));

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(_) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

const App = () => {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <ErrorBoundary fallback={<h2>Error!!!!</h2>}>
          <MyComponent />
        </ErrorBoundary>
      </Suspense>
    </div>
  );
};

export default App;

4. 总结

通过使用React.lazy()，您可以优化应用程序的初始加载时间，并异步加载仅在需要时才需要的组件。您还可以使用Suspense轻松地组合加载和错误处理。