面试题：React懒加载与Suspense集成的底层原理及自定义扩展

React中懒加载与Suspense集成的底层原理

1. Suspense捕获异步操作原理

概念：React的Suspense组件允许我们“等待”一些异步操作完成，然后再渲染其后代组件。在React 16.6引入Suspense后，它成为处理异步渲染的关键机制。
原理：当组件树中某个部分需要异步数据加载（比如通过动态导入组件、从缓存读取数据等），如果这个异步操作返回一个Promise，React会“暂停”渲染这个组件树部分。Suspense组件会捕获这个“暂停”状态，并在等待Promise解决（resolved）的过程中，渲染其fallback属性指定的内容。一旦Promise被解决，React会恢复渲染，呈现实际的组件内容。

2. Hooks在这个过程中的配合工作

useState：可以用来管理加载状态，例如是否正在加载数据，加载成功或失败等。比如在一个异步加载组件中，可以通过useState初始化一个isLoading状态，在异步操作开始时设置为true，操作完成后设置为false。
useEffect：通常用于发起异步操作。例如，在组件挂载时（通过useEffect(() => { /* 异步操作 */ }, [])）发起数据请求。useEffect可以与useState配合，在异步操作成功或失败时更新状态。
useReducer：当加载逻辑较为复杂，需要多个状态以及复杂的状态更新逻辑时，可以使用useReducer替代useState。它可以将状态更新逻辑抽象到reducer函数中，使代码更易于维护。

自定义类似Suspense组件实现图片资源懒加载的思路及关键代码结构

1. 实现思路

状态管理：利用Hooks（如useState）管理图片加载状态，包括加载中、加载成功、加载失败。
异步操作捕获：在组件渲染时检测图片资源加载是否为异步操作（例如通过判断是否使用import()动态导入图片资源），如果是，返回一个Promise并“暂停”渲染。
Fallback处理：当图片处于加载中状态时，渲染fallback指定的内容（例如加载指示器）。当加载成功，渲染实际图片；加载失败，渲染错误提示。

2. 关键代码结构

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

const MyImageSuspense = ({ fallback, src }) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const img = new Image();
    img.onload = () => setLoading(false);
    img.onerror = () => setError(new Error('Image load failed'));
    img.src = src;
    return () => {
      // 清理，取消可能的加载操作
      img.src = '';
    };
  }, [src]);

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (loading) {
    return fallback;
  }

  return <img src={src} alt="Lazy Loaded" />;
};

export default MyImageSuspense;

在上述代码中：

useState分别用于管理loading和error状态。
useEffect在src变化时，创建一个新的Image实例，监听onload和onerror事件，以更新加载状态。
根据不同的状态，组件返回fallback（加载中）、错误提示（加载失败）或实际图片（加载成功）。这样就实现了一个类似Suspense的仅针对图片资源懒加载的自定义组件，并复用了Hooks机制。

星途面试题库

面试题：React懒加载与Suspense集成的底层原理及自定义扩展

知识考点

面试题答案

React中懒加载与Suspense集成的底层原理

1. Suspense捕获异步操作原理

2. Hooks在这个过程中的配合工作

自定义类似Suspense组件实现图片资源懒加载的思路及关键代码结构

1. 实现思路

2. 关键代码结构