数据库发生变更时如何让所有React客户端触发重新渲染？

你需要的是服务端主动向所有在线客户端推送变更数据的能力，比客户端轮询性能更高、实时性更强的最优方案是WebSocket 结合 MySQL 变更监听，具体实现逻辑如下：

整体架构 #

• 服务端：Node.js 集成 Socket.IO 作为 WebSocket 服务，自带断线重连、广播、分组能力，不用自行实现基础通信逻辑
• MySQL 变更监听分为两种选型，按优先级排序：
  • 业务层触发：所有对 MySQL 的增删改操作执行成功后，直接通过 WebSocket 服务向所有连接的客户端广播变更事件和对应数据，实现简单、性能开销最小，适合绝大多数业务场景
  • Binlog 监听：如果你的系统存在多处直连写 MySQL 的场景，无法在同一业务层收口触发通知，可以用 mysql-binlog-connector 等工具监听 MySQL 行级变更，解析到变更后再通过 WebSocket 广播
• React 客户端：集成 Socket.IO-client 监听服务端推送的变更事件，收到事件后更新本地状态触发视图重渲染

核心实现步骤 #

1. 服务端配置 #

先安装依赖：npm install socket.io express mysql2
核心代码示例：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const mysql = require('mysql2/promise');

const app = express();
const server = http.createServer(app);
// 配置跨域，适配CRA默认启动地址
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"]
  }
});

// MySQL连接池配置
const dbPool = mysql.createPool({
  host: '你的MySQL地址',
  user: '数据库用户名',
  password: '数据库密码',
  database: '业务库名'
});

// 监听客户端WebSocket连接
io.on('connection', (socket) => {
  console.log('新客户端连接，ID：', socket.id);
  socket.on('disconnect', () => {
    console.log('客户端断开连接，ID：', socket.id);
  });
});

// 示例：新增数据接口，写库成功后广播变更
app.post('/api/add-record', async (req, res) => {
  const [result] = await dbPool.query('INSERT INTO 业务表 SET ?', req.body);
  const newRecord = { id: result.insertId, ...req.body };
  // 向所有在线客户端广播数据变更事件
  io.emit('data:change', { type: 'add', payload: newRecord });
  res.json({ success: true });
});

server.listen(3001, () => {
  console.log('服务运行在3001端口');
});

2. React客户端配置 #

先安装依赖：npm install socket.io-client
核心代码示例：

import { useEffect, useState } from 'react';
import { io } from 'socket.io-client';

// 初始化Socket连接，全局复用避免重复创建
const socket = io('http://localhost:3001');

function App() {
  const [recordList, setRecordList] = useState([]);

  useEffect(() => {
    // 监听服务端推送的变更事件
    socket.on('data:change', (event) => {
      const { type, payload } = event;
      switch(type) {
        case 'add':
          setRecordList(prev => [...prev, payload]);
          break;
        case 'update':
          setRecordList(prev => prev.map(item => item.id === payload.id ? payload : item));
          break;
        case 'delete':
          setRecordList(prev => prev.filter(item => item.id !== payload.id));
          break;
        default:
          break;
      }
    });

    // 组件卸载时移除事件监听，避免内存泄漏
    return () => {
      socket.off('data:change');
    };
  }, []);

  // 业务渲染逻辑省略
  return <div>{/* 渲染recordList */}</div>;
}

export default App;

备选方案说明 #

如果你的业务对实时性要求不高（允许10-30秒延迟），也可以采用客户端短轮询方案：客户端定时调用服务端接口拉取最新数据，对比本地状态后更新。这种方案实现成本最低，但服务端压力会随用户量增长快速升高，仅适合用户量小、实时性要求低的场景。

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