React Native中存储多屏共用全局应用数据的最优方案是什么？

1. 使用React Context API（原生内置方案） #

• 实现思路：创建一个全局的用户上下文，在App顶层获取Firebase用户数据后，用Provider包裹整个导航结构，所有子页面通过自定义钩子直接读取用户数据。
• 示例代码：

// UserContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import { auth, firestore } from './firebaseConfig';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 监听Firebase auth状态变化，自动同步用户数据
    const unsubscribe = auth.onAuthStateChanged(async (firebaseUser) => {
      if (firebaseUser) {
        const userDoc = await firestore.collection('users').doc(firebaseUser.uid).get();
        setUser(userDoc.data());
      } else {
        setUser(null);
      }
    });
    // 组件卸载时取消监听
    return unsubscribe;
  }, []);

  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
}

// 自定义钩子，子页面直接调用
export function useUser() {
  return useContext(UserContext);
}

• 优势：无需额外依赖，完全基于React原生能力，适合中小型项目的全局状态共享。

2. 使用Redux Toolkit（全局状态管理） #

• 实现思路：创建用户状态切片，通过异步action从Firebase获取用户数据并更新Store，各页面通过useSelector钩子读取全局状态。
• 示例代码：

// features/user/userSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { auth, firestore } from '../../firebaseConfig';

// 异步获取用户数据的action
export const fetchUser = createAsyncThunk('user/fetchUser', async () => {
  const firebaseUser = auth.currentUser;
  if (firebaseUser) {
    const userDoc = await firestore.collection('users').doc(firebaseUser.uid).get();
    return userDoc.data();
  }
  return null;
});

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export default userSlice.reducer;

// 子页面中读取数据
import { useSelector } from 'react-redux';

const UserProfile = () => {
  const user = useSelector(state => state.user.data);
  // 渲染用户数据
};

• 优势：支持复杂状态的更新、缓存与异步逻辑管理，适合大型项目或需要频繁修改用户数据的场景。

3. 封装全局工具函数+本地缓存 #

• 实现思路：写一个可全局调用的工具函数，直接从Firebase拉取用户数据，同时用AsyncStorage做本地缓存，避免重复请求。
• 示例代码：

// utils/userUtils.js
import { auth, firestore } from '../firebaseConfig';
import AsyncStorage from '@react-native-async-storage/async-storage';

export async function getCurrentUser() {
  // 先读本地缓存
  const cachedUser = await AsyncStorage.getItem('currentUser');
  if (cachedUser) {
    return JSON.parse(cachedUser);
  }

  // 缓存不存在时从Firebase获取
  const firebaseUser = auth.currentUser;
  if (firebaseUser) {
    const userDoc = await firestore.collection('users').doc(firebaseUser.uid).get();
    const userData = userDoc.data();
    // 写入缓存
    await AsyncStorage.setItem('currentUser', JSON.stringify(userData));
    return userData;
  }
  return null;
}

// 用户数据更新时清除缓存，保证下次获取最新数据
export async function clearUserCache() {
  await AsyncStorage.removeItem('currentUser');
}

• 优势：实现简单，无需引入状态管理库，适合用户数据不频繁更新的场景。

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