使用Suspense和React.lazy进行性能优化

2 年 ago
科, 雅
2 minutes

首先

chatGPT.png

代码分割 (Code splitting)

当进行代码分割时，用户只需加载所需代码，无需加载冗余代码，从而减少了初始加载时所需的代码量。

代码分割的方法

1. 导入() rù)

import { add } from './math';

console.log(add(16, 26));

import("./math").then(math => {
  console.log(math.add(16, 26));
});

2. React.lazy可以在React中实现懒加载。

import OtherComponent from './OtherComponent';

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

当该组件首次渲染时，它会自动加载包含OtherComponent的捆绑包。

两种方法的主要差异是什么？

    • ダイナミックインポートを直接使用するやり方

モジュールの関数が直接呼び出されます。

React.lazyを使用するやり方

ダイナミックインポートはReact.lazyによって間接的に使用され、ロードされたモジュールはReactコンポーネントとしてレンダリングされます。

另外，如果使用React.lazy，可以使用Suspense组件来控制异步加载组件的加载状态。我们将在下一章中对Suspense进行解释。

悬疑是什么？

悬疑片的概要

通过使用React的Suspense，可以在组件内部处理异步操作（例如数据获取或代码拆分）时，有效地管理加载状态。
Suspense组件的主要目的是在异步操作完成之前延迟特定内容（通常是组件）的加载。

与回退UI的配合

您可以使用fallback属性指定fallback UI。fallback UI是在异步操作尚未完成时显示的组件，如加载指示器或加载信息等。它用于向用户传达操作进度并明确表示正在等待的角色。

使用React.lazy和Suspense结合实现代码分割的实现。

实际的代码分割示例

import React from 'react';

const MyComponent = () => {
  return <div>My Component</div>;
};

export default MyComponent;

import React, { Suspense } from 'react';

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

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

export default App;

错误处理的实现

使用错误边界(Error Boundaries)。

使用Suspense和React.lazy进行代码分割时，错误处理起着非常重要的作用。特别是当动态加载的组件出现错误或由于网络错误等原因导致组件加载失败时，需要进行适当的错误处理。

本次我们将介绍作为错误处理技术的错误边界。错误边界会捕捉子组件树中发生的错误，并将其记录在日志中，起到代替崩溃组件树显示回退界面的作用。

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

  static getDerivedStateFromError(error) {
  // このメソッドはエラーが発生したら、stateを更新して次のレンダリングでフォールバックUIを表示できるようにします。
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // ここでエラー情報を出力します。
    console.error("An error occurred:", error, errorInfo);
    // ここに適切なエラーロギングサービスへの報告コードを書くことになります。例えば、Sentry.captureException(error);
  }

  render() {
    if (this.state.hasError) {
    // エラーが発生した場合、ここでフォールバックUIを描画できます。
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

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

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

export default App;

总结

作为优化性能的一种方式，我们撰写了一篇名为“使用Suspense和React.lazy进行性能优化”的文章。这种方法简单易用，并且不会破坏组件本身，建议您参考一下。

bannerAds