React Native本地API数据实时获取与列表更新方案咨询

我已经实现了从本地API获取数据并渲染为列表的功能，但API有新数据时列表无法自动更新。需要修改现有代码实现数据实时获取与列表实时更新。

现有代码：

import React from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [],
    }
  }

  componentDidMount() {
    var params = {
      method: 'GET',
      headers: {
        "cache-control": 'no-cache',
        pragma: 'no-cache',
      }
    };

    return fetch('http://192.168.1.54:8000/api/measurement', params)
    .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson,
        });
      })
      .catch((error) => {
        console.log(error);
      }
    );
  }

  render() {
    if(this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      )
    } else {
      let measurements = this.state.dataSource.map((val, key) => {
        return  <View key={key} style={styles.item}>
                  <Text>{val.hardwareUnit} - {val.measurementType} : {val.value}</Text>
                </View>
      });

      return (
        <View style={styles.container}>
          <Text style={styles.title}>Measurements</Text>
          {/* Display the latest 5 measurements from API */}
          {measurements.slice(Math.max(measurements.length - 5, 0))}
        </View>
      )
    }
  }
}

方法一：定时轮询（简单易实现） #

核心逻辑是每隔固定时间重复调用API拉取数据，通过更新state触发列表重渲染。

修改步骤： #

• 将API请求逻辑抽为独立方法，方便重复调用
• 在componentDidMount中先执行一次初始化请求，再启动定时任务
• 在componentWillUnmount中清除定时器，防止内存泄漏

修改后的代码：

import React from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [],
    };
    this.pollingTimer = null;
    // 设置轮询间隔，单位毫秒，这里设为3秒
    this.pollInterval = 3000;
  }

  // 抽离API请求方法
  fetchMeasurements = () => {
    const params = {
      method: 'GET',
      headers: {
        "cache-control": 'no-cache',
        pragma: 'no-cache',
      }
    };

    fetch('http://192.168.1.54:8000/api/measurement', params)
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson,
        });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  componentDidMount() {
    // 初始化数据
    this.fetchMeasurements();
    // 启动定时轮询
    this.pollingTimer = setInterval(() => {
      this.fetchMeasurements();
    }, this.pollInterval);
  }

  componentWillUnmount() {
    // 组件卸载时清除定时器
    if (this.pollingTimer) {
      clearInterval(this.pollingTimer);
    }
  }

  render() {
    if(this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      )
    } else {
      let measurements = this.state.dataSource.map((val, key) => {
        return  <View key={key} style={styles.item}>
                  <Text>{val.hardwareUnit} - {val.measurementType} : {val.value}</Text>
                </View>
      });

      return (
        <View style={styles.container}>
          <Text style={styles.title}>Measurements</Text>
          {/* Display the latest 5 measurements from API */}
          {measurements.slice(Math.max(measurements.length - 5, 0))}
        </View>
      )
    }
  }
}

方法二：使用WebSocket（高效实时，需API支持） #

如果后端API支持WebSocket，可以建立长连接，由后端主动推送新数据，相比轮询更高效，无冗余请求。

修改步骤： #

• 初始化WebSocket连接，监听消息推送事件
• 收到新数据时更新state
• 组件卸载时关闭WebSocket连接

示例代码：

import React from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [],
    };
    this.ws = null;
  }

  componentDidMount() {
    // 替换为你的WebSocket服务地址
    this.ws = new WebSocket('ws://192.168.1.54:8000/api/measurement/ws');
    
    // 连接成功回调
    this.ws.onopen = () => {
      console.log('WebSocket连接已建立');
    };

    // 接收后端推送的新数据
    this.ws.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      this.setState({
        isLoading: false,
        dataSource: newData,
      });
    };

    // 连接关闭后的处理，可选自动重连
    this.ws.onclose = () => {
      console.log('WebSocket连接已关闭');
      setTimeout(() => this.componentDidMount(), 5000);
    };

    // 连接错误处理
    this.ws.onerror = (error) => {
      console.error('WebSocket错误:', error);
    };
  }

  componentWillUnmount() {
    // 组件卸载时关闭连接
    if (this.ws) {
      this.ws.close();
    }
  }

  render() {
    // 渲染逻辑与原代码一致
    if(this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      )
    } else {
      let measurements = this.state.dataSource.map((val, key) => {
        return  <View key={key} style={styles.item}>
                  <Text>{val.hardwareUnit} - {val.measurementType} : {val.value}</Text>
                </View>
      });

      return (
        <View style={styles.container}>
          <Text style={styles.title}>Measurements</Text>
          {measurements.slice(Math.max(measurements.length - 5, 0))}
        </View>
      )
    }
  }
}

额外优化建议 #

• 数据对比更新：更新state前对比新旧数据，仅当数据确实变化时才触发更新，避免不必要的重渲染
• 失败重试逻辑：给API请求添加重试机制，防止单次请求失败导致数据停滞
• 动态调整轮询间隔：根据业务场景设置合适的轮询频率，平衡实时性和服务器压力

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