React Native中Suspense未渲染fallback视图问题求助

我使用React Native CLI创建了空项目，版本信息如下：

"react": "18.2.0",
"react-native": "0.71.6"

App.tsx 代码 #

import type {PropsWithChildren} from 'react';
import React, {Suspense} from 'react';
import {Text, View} from 'react-native';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

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

function App() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Hello!</Text>
      <Suspense
        fallback={
          <View>
            <Text>Loading...</Text>
            <Text>Loading...</Text>
            <Text>Loading...</Text>
            <Text>Loading...</Text>
          </View>
        }>
        <MyComponent />
      </Suspense>
    </View>
  );
}

export default App;

Component.tsx 代码 #

import React, { useEffect, useState } from "react";
import { Text, View } from "react-native";

function loadData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("loaded data");
    }, 8000);
  });
}

export default function MyComponent() {
  const [data, setData] = useState<string>("");

  useEffect(() => {
    loadData().then((data) => {
      setData("This is test!!!");
    });
  }, []);

  return (
    <View>
      <Text>{data}</Text>
    </View>
  );
}

我用React.lazy()懒加载组件，想通过Suspense在Promise完成前渲染fallback视图，但实际未生效，请问哪里出错了？

• 对Suspense的作用范围理解有误：React.lazy配合Suspense仅能处理组件本身的加载阶段（也就是import('./Component')这个Promise的等待过程），而你代码里的loadData是组件挂载后通过useEffect执行的内部数据加载逻辑，不在Suspense的处理范围内。

• 要让Suspense处理数据加载，需使用React 18+的Suspense数据模式：

  1. 将数据逻辑改为支持Suspense的格式，使用React.cache包装异步函数，并直接在组件内调用：
     修改后的Component.tsx：

     import React, { cache } from "react";
     import { Text, View } from "react-native";
     
     const loadData = cache(() => {
       return new Promise((resolve) => {
         setTimeout(() => {
           resolve("This is test!!!");
         }, 8000);
       });
     });
     
     export default function MyComponent() {
       // 直接调用异步函数，Suspense会捕获Promise并显示fallback
       const data = loadData();
       return (
         <View>
           <Text>{data}</Text>
         </View>
       );
     }
     

  2. 如果不想修改数据逻辑，可在组件内部自行管理加载状态：
     修改后的Component.tsx：

     import React, { useEffect, useState } from "react";
     import { Text, View } from "react-native";
     
     function loadData() {
       return new Promise((resolve) => {
         setTimeout(() => {
           resolve("loaded data");
         }, 8000);
       });
     }
     
     export default function MyComponent() {
       const [data, setData] = useState<string>("");
       const [isLoading, setIsLoading] = useState(true);
     
       useEffect(() => {
         loadData().then(() => {
           setData("This is test!!!");
           setIsLoading(false);
         });
       }, []);
     
       if (isLoading) {
         return (
           <View>
             <Text>Loading...</Text>
             <Text>Loading...</Text>
             <Text>Loading...</Text>
             <Text>Loading...</Text>
           </View>
         );
       }
     
       return (
         <View>
           <Text>{data}</Text>
         </View>
       );
     }
     

• 额外提示：React Native的打包机制可能让React.lazy的组件加载速度极快，导致Suspense的fallback来不及显示。若要测试组件加载的fallback效果，可给import添加延迟：

  const MyComponent = React.lazy(() => 
    new Promise(resolve => setTimeout(() => resolve(import('./Component')), 2000))
  );
  

内容的提问来源于stack exchange，提问作者a.toraby