如何在React Native中实现类似useSWR的前端数据实时刷新？

方案1：定时轮询（复刻useSWR的refreshInterval逻辑） #

这就是你之前用useSWR的思路，前端定时发请求拉取最新数据，实现毫无门槛。

实现步骤 #

1. 后端写简单接口，比如GET /api/comments，返回最新评论列表——建议带上每条评论的updatedAt时间戳，前端可只请求比本地最后一条评论更新的数据，减少带宽浪费。
2. React Native直接用swr库（支持RN），设置refreshInterval即可，无需手动写定时器：

import useSWR from 'swr';

// 封装请求函数
const fetcher = (url) => fetch(url).then(res => res.json());

function CommentList() {
  const { data: comments, error } = useSWR('/api/comments', fetcher, {
    refreshInterval: 1000, // 每秒刷新一次
  });

  if (error) return <Text>加载评论失败</Text>;
  if (!comments) return <Text>加载中...</Text>;

  return (
    <FlatList
      data={comments}
      renderItem={({ item }) => <Text>{item.author}: {item.content}</Text>}
      keyExtractor={item => item._id}
    />
  );
}

优缺点 #

• 优点：代码量少、易维护，无需改动后端架构，全设备兼容
• 缺点：频繁请求消耗流量和设备电池，用户量大时后端压力上升；实时性依赖轮询间隔（1秒延迟可接受，但非即时）

方案2：MongoDB触发的实时推送（WebSocket + 数据库触发器） #

数据变化时主动推送给前端，实时性拉满且性能更优，但实现需多步配置。

核心逻辑 #

通过MongoDB的Change Streams监听评论集合的新增事件，后端拿到变化后，用WebSocket推送给在线的RN客户端；若需兼顾离线用户，可配合FCM（Android）/APNs（iOS）推送通知，但推送通知更适合提醒，实时更新UI首选WebSocket。

实现步骤 #

第一步：后端配置MongoDB触发器 + WebSocket服务

const { MongoClient } = require('mongodb');
const WebSocket = require('ws');
const express = require('express');

const app = express();
const wss = new WebSocket.Server({ port: 8080 });
const mongoClient = new MongoClient('mongodb://localhost:27017/your-db-name');

// 连接MongoDB并监听评论集合新增事件
async function setupChangeStream() {
  await mongoClient.connect();
  const commentsCollection = mongoClient.db().collection('comments');
  const changeStream = commentsCollection.watch([
    { $match: { operationType: 'insert' } } // 仅监听新增评论
  ]);

  changeStream.on('change', (change) => {
    // 向所有在线WebSocket客户端推送新评论
    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify(change.fullDocument));
      }
    });
  });
}
setupChangeStream().catch(console.error);

// 初始加载评论的Express接口
app.get('/api/comments', async (req, res) => {
  const comments = await mongoClient.db().collection('comments').find().sort({ createdAt: -1 }).toArray();
  res.json(comments);
});

app.listen(3000, () => console.log('Express服务启动在3000端口'));

第二步：React Native客户端连接WebSocket

import { useEffect, useState } from 'react';
import { FlatList, Text } from 'react-native';

function CommentList() {
  const [comments, setComments] = useState([]);

  // 初始加载评论列表
  useEffect(() => {
    fetch('http://your-backend-ip:3000/api/comments')
      .then(res => res.json())
      .then(data => setComments(data));
  }, []);

  // 连接WebSocket接收实时更新
  useEffect(() => {
    const ws = new WebSocket('ws://your-backend-ip:8080');
    
    ws.onopen = () => console.log('WebSocket连接成功');
    ws.onmessage = (event) => {
      const newComment = JSON.parse(event.data);
      // 将新评论放到列表最前方
      setComments(prev => [newComment, ...prev]);
    };
    ws.onerror = err => console.error('WebSocket出错:', err);
    ws.onclose = () => console.log('WebSocket连接关闭');

    // 组件卸载时关闭连接
    return () => ws.close();
  }, []);

  return (
    <FlatList
      data={comments}
      renderItem={({ item }) => <Text>{item.author}: {item.content}</Text>}
      keyExtractor={item => item._id}
    />
  );
}

优缺点 #

• 优点：实时性拉满，数据变化立即推送；带宽和后端压力小，无频繁请求开销
• 缺点：需额外维护WebSocket服务，处理连接断开重连（如网络波动自动重连），还要配置MongoDB的Change Streams（本地MongoDB或Atlas均支持）

方案选择建议 #

• 快速上线、用户量小：选定时轮询，用SWR几分钟就能搞定，和你之前Next.js的逻辑几乎一致
• 追求性能、用户量大、实时性要求高：选WebSocket + MongoDB Change Streams，这是生产环境的标准实时方案

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