React Native多页面状态共享最佳方案及状态管理工具选择咨询

当前方案的问题 #

你通过route.params传递setter函数的方式虽然能实现功能，但导航状态要求是可序列化的数据，函数无法被序列化，因此会触发警告，而且这种方式会让页面与导航逻辑强耦合，扩展性差，确实不是最优解。

主流状态共享方案对比与选择 #

1. React Context（推荐你的场景使用） #

• 适用场景：中小型应用、跨层级/跨页面共享少量简单状态（比如你的val_A、val_B）
• 优点：React原生API，无需额外安装依赖，学习成本低，轻量灵活
• 缺点：状态更新会触发所有订阅组件的重渲染（可通过useMemo、useCallback优化），复杂状态逻辑下代码易零散

2. Redux（含Redux Toolkit） #

• 适用场景：大型复杂应用、需要全局统一状态管理、有大量异步操作或复杂状态逻辑
• 优点：状态管理规范，调试工具完善（Redux DevTools），适合团队协作，状态更新可追踪
• 缺点：需安装额外依赖，学习成本较高，配置相对繁琐（Redux Toolkit已大幅简化）

3. Recoil #

• 适用场景：需要细粒度状态控制的应用、组件间状态依赖复杂的场景
• 优点：基于原子（Atom）的状态管理，支持选择性订阅，重渲染控制更精准
• 缺点：生态不如Redux成熟，社区资源相对较少

针对你的场景建议：优先使用React Context，因为你的状态逻辑简单，无需引入复杂第三方库，能快速解决问题且代码更简洁。

基于React Context的代码改写示例 #

1. 创建状态Context #

新建CounterContext.tsx：

import React, { createContext, useContext, useState, useCallback } from 'react';

type CounterState = {
  val_A: number;
  val_B: number;
  incrementA: () => void;
  incrementB: () => void;
};

const CounterContext = createContext<CounterState | undefined>(undefined);

export const CounterProvider = ({ children }: { children: React.ReactNode }) => {
  const [val_A, set_A] = useState(0);
  const [val_B, set_B] = useState(0);

  const incrementA = useCallback(() => {
    set_A(prev => prev + 1);
  }, []);

  const incrementB = useCallback(() => {
    set_B(prev => prev + 1);
  }, []);

  return (
    <CounterContext.Provider value={{ val_A, val_B, incrementA, incrementB }}>
      {children}
    </CounterContext.Provider>
  );
};

export const useCounter = () => {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error('useCounter must be used within a CounterProvider');
  }
  return context;
};

2. 修改App.tsx #

将Provider包裹在导航容器外层：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import A from './components/A';
import B from './components/B';
import { CounterProvider } from './CounterContext';

const Stack = createNativeStackNavigator();

function App(): React.JSX.Element {
  return (
    <CounterProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="A">
          <Stack.Screen name="A" component={A} />
          <Stack.Screen name="B" component={B} />
        </Stack.Navigator>
      </NavigationContainer>
    </CounterProvider>
  );
}

export default App;

3. 修改A.tsx #

直接通过自定义Hook获取状态与方法：

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { useCounter } from '../CounterContext';

function A({ navigation }): React.JSX.Element {
  const { val_A, val_B, incrementA, incrementB } = useCounter();

  return (
    <View style={styles.container}>
      <Text>This is page A</Text>
      <Text>{val_A}</Text>
      <Text>{val_B}</Text>

      <Button onPress={incrementA} title='Add A'/>
      <Button onPress={incrementB} title='Add B'/>
      <Button onPress={() => navigation.navigate('B')} title='Switch'/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  }
});

export default A;

4. 修改B.tsx #

与A.tsx逻辑一致，直接使用useCounter：

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { useCounter } from '../CounterContext';

function B({ navigation }): React.JSX.Element {
  const { val_A, val_B, incrementA, incrementB } = useCounter();

  return (
    <View style={styles.container}>
      <Text>This is page B</Text>
      <Text>{val_A}</Text>
      <Text>{val_B}</Text>

      <Button onPress={incrementA} title='Add A'/>
      <Button onPress={incrementB} title='Add B'/>
      <Button onPress={() => navigation.navigate('A')} title='Switch'/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  }
});

export default B;

关键优化点 #

• 用useCallback包裹状态更新方法，避免组件重渲染时创建新函数
• 自定义useCounterHook，简化Context使用流程，同时避免重复的上下文校验
• 完全移除导航参数传递状态的逻辑，实现页面与导航逻辑解耦

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