React Native中BLE类单独运行正常，实例化后部分功能失效

我正在使用React Native开发蓝牙遥控器，现有一个BLE类单独运行时功能正常，但将其在另一个类中实例化后，部分功能无法正常工作。

代码如下：

import BLE from './Core/BLE.js'

const myBLE = new BLE();

function DebugScreen(){
    useEffect(() => {
      myBLE.componentDidMount();
    }, []);
    
    return(
      <ScrollView>
        <Text>State: {myBLE.state.info}</Text>
        <Text>Devices: {JSON.stringify(myBLE.state.ble_devices)}</Text>
      </ScrollView>
    )
  }
  
export default DebugScreen;

其中Devices文本框能正常显示数据，但State无法显示。我已通过在页面添加计时器排除了单纯的状态未刷新问题。

我的问题是：实例化类中的代码与未实例化的代码是否存在本质区别？

问题分析与解答 #

先明确核心区别：实例化与未实例化代码的本质差异 #

• 未实例化的类：本质是一个代码模板，没有专属状态，静态成员属于类本身，实例成员只有在被实例化后才会生成；
• 实例化后的对象：拥有独立的状态空间，每个实例的状态、属性都是隔离的，不会和其他实例互相干扰。

但你当前的问题和这个区别无关，核心是React组件对外部实例状态的感知机制问题。

你的状态显示异常原因 #

React组件只有在自身state/props变化时才会触发重渲染。myBLE是组件外部的独立实例，它内部的state更新不会主动通知React组件——ble_devices能显示，大概率是它在组件首次渲染前就已经有值，而info是后续更新的，组件没收到重渲染信号，所以始终显示初始值。

单独运行BLE类时，你可能是在类自身逻辑里绑定了UI更新（比如类内部有状态变更的UI回调），但放到React组件后，React的渲染机制和外部实例的状态更新完全脱节。

解决建议 #

1. 同步外部实例状态到组件state
   如果BLE类支持状态变更订阅，在组件内监听并更新自身state：

function DebugScreen(){
    const [bleState, setBleState] = useState(myBLE.state);
    
    useEffect(() => {
      myBLE.componentDidMount();
      // 假设BLE类提供状态变更订阅方法
      const unsubscribe = myBLE.onStateChange((newState) => {
        setBleState(newState);
      });
      // 组件卸载时清理订阅
      return () => unsubscribe();
    }, []);
    
    return(
      <ScrollView>
        <Text>State: {bleState.info}</Text>
        <Text>Devices: {JSON.stringify(bleState.ble_devices)}</Text>
      </ScrollView>
    )
  }

2. 将BLE逻辑封装为React Hook
   这是更符合React生态的做法，让状态天然被React感知：

// useBLE.js
import { useState, useEffect } from 'react';
import BLE from './Core/BLE.js';

export function useBLE() {
  const [state, setState] = useState({ info: '', ble_devices: [] });
  let bleInstance;

  useEffect(() => {
    bleInstance = new BLE();
    bleInstance.componentDidMount();
    // 绑定状态变更回调，同步到组件state
    const unsubscribe = bleInstance.onStateChange(setState);
    // 组件卸载时清理BLE实例
    return () => {
      bleInstance.componentWillUnmount?.();
      unsubscribe();
    };
  }, []);

  return state;
}

组件内使用：

function DebugScreen(){
    const bleState = useBLE();
    
    return(
      <ScrollView>
        <Text>State: {bleState.info}</Text>
        <Text>Devices: {JSON.stringify(bleState.ble_devices)}</Text>
      </ScrollView>
    )
  }

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