React首次打开仅显示启动屏：如何实现首次打开时读取缓存并展示数据

• 现有页面运行缺陷：首次进入仅显示启动屏，必须返回后二次进入才能加载展示数据
• 核心改造需求：首次打开页面即从本地缓存读取已有数据并展示
• 预期交互逻辑：首次打开时，缓存读写、数据同步的全流程执行期间保持启动屏展示，所有初始化操作完成后再渲染真实业务数据

• 启动屏判断逻辑绑定了cacheData状态：if (!cacheData) return <SplashScreen />，但cacheData初始值为null
• 时序错位：首次进入页面时，本地缓存没有历史存储的数据，cache.get读取到的结果为空，会导致cacheData永远为null，启动屏永远无法关闭；只有二次进入页面时，上一次运行时写入的缓存存在，才能拿到有效值跳过启动屏
• 状态不同步：代码里同时维护了dataList1（业务渲染数据源）和cacheData（缓存读取值）两个状态，没有做数据同步，就算拿到了缓存数据，如果dataList1为空，页面依然没有可渲染的内容
• 数据逻辑问题：云端数据拉取完成后用追加方式更新状态，二次进入时会出现数据重复

核心调整思路：用统一的初始化状态作为启动屏的唯一判断依据，把「读取本地缓存」和「拉取云端同步」两个流程全部纳入初始化环节，操作全部完成后再关闭启动屏。
具体调整点：

• 新增统一初始化状态isInitializing，初始值为true，覆盖全初始化流程的加载状态
• 调整初始化执行顺序：
  1. 组件挂载后先读取本地缓存，若缓存存在有效数据，立刻同步到业务渲染状态dataList1，无需等待云端数据返回
  2. 同步执行原有云端权限校验、数据拉取逻辑，拉取完成后用最新云端数据覆盖dataList1，同时写入本地缓存
  3. 所有流程（读取缓存、拉取云端数据、写入缓存）全部执行完毕后，再将isInitializing置为false，关闭启动屏
• 修正数据重复问题：云端数据返回后直接覆盖dataList1，不再做数组追加

const [dataList1, setDataList1] = useState([]);
// 统一管理初始化加载状态，作为启动屏的唯一判断标准
const [isInitializing, setIsInitializing] = useState(true);

// 读取本地缓存
const getDataFromCache = async () => {
    try {
        const cachedData = await cache.get(cacheKeys.BENEFITS_CACHE_KEY);
        if (cachedData) {
            // 缓存有效就直接同步到渲染数据源，不等云端返回
            setDataList1(cachedData);
        }
    } catch (err) {
        console.log('缓存读取失败', err);
    }
};

// 初始化全流程
useEffect(() => {
    const initPage = async () => {
        // 第一步：先加载本地缓存数据
        await getDataFromCache();

        // 第二步：执行云端数据拉取与同步
        const unsubscribe = auth.onAuthStateChanged(async (authUser) => {
            // 无登录态的场景也要结束初始化，避免卡在启动屏
            if (!authUser) {
                setIsInitializing(false);
                return;
            }
            try {
                const userDoc = await db.collection('members').doc(authUser.uid).get();
                const userBenefits = userDoc.data().benefits || [];

                const benefitsSnapshots = await db.collection('benefits').get();
                const benefitDetailsList = [];
                benefitsSnapshots.forEach(doc => {
                    if (userBenefits.includes(doc.id)) {
                        benefitDetailsList.push(doc.data());
                    }
                });

                // 用云端最新数据覆盖渲染状态
                setDataList1(benefitDetailsList);
                // 同步写入本地缓存
                if (benefitDetailsList.length > 1) {
                    await cache.store(cacheKeys.BENEFITS_CACHE_KEY, benefitDetailsList);
                }
            } catch (err) {
                console.log('云端数据拉取失败', err);
            } finally {
                // 所有流程执行完毕，关闭启动屏
                setIsInitializing(false);
            }
        });

        return unsubscribe;
    };

    initPage();
}, []);

// 启动屏判断逻辑
if (isInitializing) return <SplashScreen />;

• 首次进入页面时，若本地缓存存在有效历史数据，会在初始化流程中直接同步到渲染状态，不会出现一直卡在启动屏的问题
• 启动屏的展示时长完全覆盖所有初始化操作，符合“读写缓存期间显示启动屏，完成后展示真实数据”的预期
• 彻底消除二次进入时的数据重复问题
• 无本地缓存时，会等云端数据拉取完成后再关闭启动屏，交互逻辑自洽

内容的提问来源于stack exchange，提问作者Nats E