如何在类组件收到新prop数据时触发重新渲染？

首先要明确：React类组件默认会在prop引用发生变化时自动触发重新渲染，但如果传入的是引用类型（比如BLE实例），仅修改实例内部数据而不改变引用的话，React无法检测到变化，就不会触发重渲染。针对你的场景，有两种核心解决思路：

思路1：通过生命周期钩子手动检测Prop变化并更新 #

如果必须直接传递BLE实例作为prop，可以在DeviceScreen类中通过生命周期钩子对比新旧prop的内部数据，主动触发重渲染。

方法1：使用componentDidUpdate #

在组件更新后对比前后prop的关键数据，若发生变化则更新组件内部state，从而触发重渲染：

class DeviceScreen extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state，从prop中获取初始数据
    this.state = {
      currentBleData: props.route.params.myBLE.data
    };
  }

  componentDidUpdate(prevProps) {
    // 对比BLE实例中的关键数据（比如data字段）
    const currentBle = this.props.route.params.myBLE;
    const prevBle = prevProps.route.params.myBLE;
    if (currentBle.data !== prevBle.data) {
      // 更新state，触发组件重渲染
      this.setState({
        currentBleData: currentBle.data
      });
    }
  }

  render() {
    // 使用state中的数据渲染组件
    return <div>{this.state.currentBleData}</div>;
  }
}

方法2：使用getDerivedStateFromProps #

这是React推荐的静态方法，用于从prop派生state，更适合需要持续同步prop到state的场景：

class DeviceScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentBleData: props.route.params.myBLE.data
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // 对比新prop和旧state的数据
    const newBleData = nextProps.route.params.myBLE.data;
    if (newBleData !== prevState.currentBleData) {
      // 返回新的state，触发重渲染
      return { currentBleData: newBleData };
    }
    // 返回null表示不需要更新state
    return null;
  }

  render() {
    return <div>{this.state.currentBleData}</div>;
  }
}

思路2：顶层组件维护BLE数据状态（更推荐） #

避免直接传递BLE实例，而是在顶层组件中监听BLE的数据更新，将具体数据而非实例存在顶层state中，再传递给DeviceScreen。这样数据更新时顶层state变化，React会自动检测到prop变化并触发DeviceScreen重渲染：

// 顶层组件示例
class TopComponent extends React.Component {
  state = {
    bleData: null
  };

  componentDidMount() {
    // 初始化BLE实例并监听数据更新
    this.myBLE = new BLE();
    // 假设BLE类提供数据更新的回调
    this.myBLE.on('dataUpdate', (newData) => {
      // 更新顶层state，触发子组件重渲染
      this.setState({ bleData: newData });
    });
  }

  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="DeviceScreen"
            component={DeviceScreen}
            initialParams={{ bleData: this.state.bleData }}
            // 每次state更新时传递最新数据
            params={{ bleData: this.state.bleData }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

// DeviceScreen组件直接使用prop中的数据
class DeviceScreen extends React.Component {
  render() {
    const { bleData } = this.props.route.params;
    return <div>{bleData ? bleData : '等待蓝牙数据...'}</div>;
  }
}

这种方式不需要在DeviceScreen中额外处理生命周期，代码更简洁，也符合React的状态管理逻辑。

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