如何避免React Native组件因Context值变更而重新挂载？

问题 #

我正在开发一款聊天APP，需要在用户发送消息和发起聊天时扣除其账户积分。用户账户通过Context在APP中共享，并借助Firestore文档的快照监听器，在账户文档发生变更时自动更新（代码示例见下文）。

根据React文档，每当userAccount对象发生变化时，Context Provider的所有子组件（包括NavigationStructure及其所有子组件）都会重新渲染。但这给聊天屏幕带来了严重问题：聊天屏幕内定义的组件状态会在Context值变化时被重新初始化。比如我有个控制模态框显示的状态modalVisible，默认值为true，进入聊天屏幕后隐藏模态框，但只要手动修改Firestore数据库中的值（比如扣除积分），聊天屏幕就会重新渲染，模态框又变回可见状态。

我不确定最佳解决方案是什么，求思路。

我考虑过的解决方案 #

• 将积分计数器移至另一个Firestore文档，每天扣除一次积分，但这感觉是个奇怪的变通方案。
• 搜索得知可以使用useCallback或React.memo，但不确定具体如何操作。
• 放弃开发去做木工……但这像是逃避问题。
• 可能和我在NavigationStructure中使用的嵌套react-navigation栈式导航器和标签导航器有关？

我尝试过的方法 #

• 将NavigationStructure的所有子组件用React.memo包裹
• 确保不在组件内部定义其他组件
• 查阅大量Stack Overflow帖子并尝试修复，但都无效

代码示例 #

1. 带Context的APP设置

function App() {
  const userData = useUserData();
  ...
  return (
    <>
      <UserContext.Provider value={{ ...userData }}>
        <NavigationStructure />
      </UserContext.Provider>
    </>
}

2. 带Firestore快照监听器的useUserData Hook

export const useUserData = () => {
  const [user, loading] = useAuthState(authFB);
  const [userAccount, setUserAccount] = useState<userAccount | null>();
  const [userLoading, setUserLoading] = useState(true);

  useEffect(() => {
      ...
      unsubscribe = onSnapshot(
        doc(getFirestore(), firebaseCollection.userAccount, user.uid),
        (doc) => {
          if (doc.exists()) {
            const data = doc.data() as userAccount & firebaseRequirement; 
            // 注：data包含'credits'字段
            ...
            setUserAccount(data);
          
          } 
           ...
        }
      );

  }, [user, loading]);
  ...
  return {
    user,
    userAccount,
    userLoading: userLoading || loading,
  };
};

3. 带模态框的聊天屏幕代码示例

export const Chat = ({ route, navigation }: ChatScreenProps): JSX.Element => {
  const ctx = useContext(UserContext);
  const userAccount = ctx.userAccount as userAccount;
  ...
  
  // 控制模态框可见性
  const [modalVisible, setModalVisible] = useState(true); 
  // 问题所在：每当userAccount发生变化时，这个状态会被重新初始化为true
  ...

  return (
    <>
      ...
      <Modal
        title={t(tPrefix, 'tasklistModal.title')}
        visible={modalVisible}
        onClose={() => setModalVisible(false)}
        footer={
          ...
        }
      >
       ....
      </Modal>
     ...
    </>)
}

解决方案 #

1. 优化Context传递，避免不必要重渲染 #

问题核心是每次userAccount更新时，Context Provider的value都会生成新对象（{ ...userData }每次都是新引用），导致所有消费Context的组件触发重渲染。

修复步骤：

• 在useUserData中用useMemo缓存返回对象，仅当依赖项变化时生成新引用：

export const useUserData = () => {
  const [user, loading] = useAuthState(authFB);
  const [userAccount, setUserAccount] = useState<userAccount | null>();
  const [userLoading, setUserLoading] = useState(true);

  useEffect(() => {
      // 原快照监听器逻辑不变
  }, [user, loading]);

  // 缓存返回值，依赖项为状态变量
  const memoizedUserData = useMemo(() => ({
    user,
    userAccount,
    userLoading: userLoading || loading,
  }), [user, userAccount, userLoading, loading]);

  return memoizedUserData;
};

• App组件中直接传递缓存后的userData，无需解构重建对象：

function App() {
  const userData = useUserData();
  ...
  return (
    <>
      <UserContext.Provider value={userData}>
        <NavigationStructure />
      </UserContext.Provider>
    </>
}

2. 精准消费Context+React.memo #

如果聊天屏幕只需要userAccount中的特定字段（比如积分），可以用useContextSelector（React 18+内置或第三方库）精准选择依赖，避免因Context其他字段变化触发重渲染。

操作步骤：

• 用use-context-selector创建Context（或使用React 18+内置API）：

import { createContext } from 'use-context-selector';

export const UserContext = createContext<ReturnType<typeof useUserData>>({
  user: null,
  userAccount: null,
  userLoading: true,
});

• Chat组件中仅选择所需字段：

import { useContextSelector } from 'use-context-selector';

export const Chat = React.memo(({ route, navigation }: ChatScreenProps): JSX.Element => {
  // 只选择积分字段，避免其他字段变化触发重渲染
  const userCredits = useContextSelector(UserContext, (ctx) => ctx.userAccount?.credits ?? 0);
  
  const [modalVisible, setModalVisible] = useState(true); 

  // 原UI逻辑不变
  return (...)
})

3. 检查导航配置，避免组件意外卸载 #

如果聊天屏幕在Context更新时被卸载再重新挂载，状态会被重置。可以添加卸载日志验证：

useEffect(() => {
  return () => console.log('Chat组件被卸载');
}, []);

若日志触发，需调整react-navigation配置，比如启用栈页面的保留策略（如preserveScrollPosition），确保页面切换时不被卸载。

4. 拆分Context，分离频繁更新的状态 #

把userAccount中频繁变化的字段（如积分）单独拆成独立Context，仅让需要该字段的组件消费，减少重渲染范围：

// 创建积分专用Context
export const UserCreditsContext = createContext<number>(0);

// App组件中提供双Context
function App() {
  const userData = useUserData();
  const userCredits = userData.userAccount?.credits ?? 0;
  
  return (
    <>
      <UserContext.Provider value={userData}>
        <UserCreditsContext.Provider value={userCredits}>
          <NavigationStructure />
        </UserCreditsContext.Provider>
      </UserContext.Provider>
    </>
}

Chat组件仅消费UserCreditsContext，避免因userAccount其他字段变化触发重渲染。

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