React Native BottomTabNavigator中监听全局变量更新组件的方法

问题背景 #

你的项目使用bottomTabNavigator，在Dashboard屏幕中通过蓝牙连接/断开事件更新全局变量global.appState，但其他屏幕（如Tickets.js）无法直接感知该变量变化，只能通过轮询更新组件，存在性能问题。需要实现仅当变量变化时触发组件更新的方案。

可行解决方案 #

方案1：使用React Context管理全局状态 #

React Context可以让你在组件树中共享状态，状态变化时自动通知订阅组件重新渲染，完全替代全局变量+轮询的方式。

步骤1：创建全局状态Context

// BluetoothContext.js
import React, { createContext, useState, useContext } from 'react';

const BluetoothContext = createContext();

export function BluetoothProvider({ children }) {
  const [connectionState, setConnectionState] = useState('No device connected');

  return (
    <BluetoothContext.Provider value={{ connectionState, setConnectionState }}>
      {children}
    </BluetoothContext.Provider>
  );
}

export function useBluetooth() {
  return useContext(BluetoothContext);
}

步骤2：在根组件中包裹Provider

确保bottomTabNavigator被BluetoothProvider包裹，让所有子组件都能访问状态：

// App.js
import { BluetoothProvider } from './BluetoothContext';
import TabNavigator from './TabNavigator';

export default function App() {
  return (
    <BluetoothProvider>
      <TabNavigator />
    </BluetoothProvider>
  );
}

步骤3：在Dashboard中更新Context状态

替换直接修改global.appState的代码，改为更新Context状态：

// Dashboard.js
import { useBluetooth } from './BluetoothContext';

// 在组件内获取状态更新方法
const { setConnectionState } = useBluetooth();

// 连接成功时
BluetoothManager.connect(row.address).then(
  success => {
    Alert.alert('Alert', 'Success');
    setConnectionState(`Successfully connected to ${row.name}`);
  }
);

// 连接断开时
DeviceEventEmitter.addListener(
  BluetoothManager.EVENT_CONNECTION_LOST,
  () => {
    console.log('EVENT_CONNECTION_LOST');
    setConnectionState('No device connected');
  },
);

步骤4：在Tickets.js中订阅状态

通过自定义Hook直接获取状态，状态变化时组件自动重新渲染：

// Tickets.js
import { useBluetooth } from './BluetoothContext';

function Tickets() {
  const { connectionState } = useBluetooth();

  // 直接使用connectionState即可，无需轮询
  return (
    <Text>{connectionState}</Text>
  );
}

export default Tickets;

方案2：使用自定义事件通知（轻量化方案） #

如果不想引入Context，可以利用DeviceEventEmitter发送自定义事件，在需要监听的组件中接收事件并更新状态。

步骤1：在Dashboard中更新全局变量并发送事件

// Dashboard.js
// 连接成功时
BluetoothManager.connect(row.address).then(
  success => {
    Alert.alert('Alert', 'Success');
    global.appState = `Successfully connected to ${row.name}`;
    // 发送自定义事件
    DeviceEventEmitter.emit('BLUETOOTH_STATE_CHANGED', global.appState);
  }
);

// 连接断开时
DeviceEventEmitter.addListener(
  BluetoothManager.EVENT_CONNECTION_LOST,
  () => {
    console.log('EVENT_CONNECTION_LOST');
    global.appState = 'No device connected';
    // 发送自定义事件
    DeviceEventEmitter.emit('BLUETOOTH_STATE_CHANGED', global.appState);
  },
);

步骤2：在Tickets.js中监听自定义事件

// Tickets.js
import React, { Component } from 'react';
import { DeviceEventEmitter } from 'react-native';

class Tickets extends Component {
  state = {
    appState: global.appState || 'No device connected'
  };

  componentDidMount() {
    // 订阅自定义事件
    this.stateChangeListener = DeviceEventEmitter.addListener(
      'BLUETOOTH_STATE_CHANGED',
      (newState) => {
        this.setState({ appState: newState });
      }
    );
  }

  componentWillUnmount() {
    // 移除监听，防止内存泄漏
    this.stateChangeListener.remove();
  }

  render() {
    return (
      <Text>{this.state.appState}</Text>
    );
  }
}

export default Tickets;

方案3：使用状态管理库（适合复杂项目） #

如果项目状态复杂、多个组件需要共享多个状态，可以引入Redux或MobX这类状态管理库，将蓝牙连接状态存入全局store，组件通过订阅store变化更新UI。这种方式结构更清晰，适合大型项目。

注意事项 #

• 方案1是React官方推荐的全局状态管理方式，无额外依赖，适配大多数场景；
• 方案2更轻量化，适合小型项目或不想重构现有代码的情况，但必须在组件卸载时移除事件监听，避免内存泄漏；
• 彻底移除原有轮询代码（UNSAFE_componentWillUpdate和UNSAFE_componentWillMount相关逻辑），消除性能损耗。

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