MERN栈实时通知功能优化：实现通知组件自动重渲染

针对你的需求，下面提供几种实用方案，从简便到实时性优化排序：

方案一：用React Query/SWR实现自动更新（最简便） #

这类数据请求库自带缓存、自动重取和失效更新功能，完全不用自己写轮询或状态管理逻辑，是最省心的方案。

示例代码（React Query） #

import { useQuery, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';

// 封装通知获取接口
const fetchUserNotifications = async (userId) => {
  const res = await axios.get(`/api/notifications/${userId}`);
  return res.data;
};

function NotificationsList({ userId }) {
  const queryClient = useQueryClient();
  
  // 用useQuery获取通知，开启自动轮询
  const { data: notifications } = useQuery({
    queryKey: ['user-notifications', userId], // 唯一缓存键
    queryFn: () => fetchUserNotifications(userId),
    refetchInterval: 30000, // 每30秒自动拉取一次
    refetchOnWindowFocus: true, // 页面重新聚焦时自动拉取
  });

  // 点赞操作后手动触发缓存失效，立即更新通知
  const handleLikePost = async (postId) => {
    await axios.post(`/api/posts/${postId}/like`);
    // 让通知缓存失效，触发重新获取
    queryClient.invalidateQueries(['user-notifications', userId]);
  };

  return (
    <div className="notifications">
      {notifications?.map(notify => (
        <div key={notify._id} className="notification-item">
          {notify.content}
        </div>
      ))}
    </div>
  );
}

方案二：React Context API手动管理状态（无额外依赖） #

如果不想引入第三方库，用React自带的Context全局管理通知状态，在点赞操作后主动更新数据，触发组件重渲染。

步骤1：创建通知Context #

import { createContext, useContext, useState, useEffect } from 'react';
import axios from 'axios';

const NotificationContext = createContext();

export function NotificationProvider({ children, userId }) {
  const [notifications, setNotifications] = useState([]);

  // 初始化拉取通知
  const loadNotifications = async () => {
    const res = await axios.get(`/api/notifications/${userId}`);
    setNotifications(res.data);
  };

  useEffect(() => {
    loadNotifications();
  }, [userId]);

  // 对外提供更新通知的方法
  const refreshNotifications = () => {
    loadNotifications();
  };

  return (
    <NotificationContext.Provider value={{ notifications, refreshNotifications }}>
      {children}
    </NotificationContext.Provider>
  );
}

// 自定义钩子简化调用
export function useNotifications() {
  return useContext(NotificationContext);
}

步骤2：在组件中使用 #

// 通知列表组件
import { useNotifications } from './NotificationContext';

function NotificationsList() {
  const { notifications } = useNotifications();

  return (
    <div>
      {notifications.map(notify => (
        <div key={notify._id}>{notify.content}</div>
      ))}
    </div>
  );
}

// 点赞按钮组件
import { useNotifications } from './NotificationContext';

function PostLikeButton({ postId, userId }) {
  const { refreshNotifications } = useNotifications();

  const handleLike = async () => {
    await axios.post(`/api/posts/${postId}/like`);
    // 点赞后立即刷新通知
    refreshNotifications();
  };

  return <button onClick={handleLike}>点赞</button>;
}

方案三：简化SocketIO实现（实时性最优） #

如果需要真正的实时通知（用户刚点赞，对方立刻收到），SocketIO其实是最优解，之前觉得麻烦可能是逻辑没简化，下面是轻量版实现：

服务端（Node.js/Express） #

const io = require('socket.io')(server, { cors: { origin: '*' } });

io.on('connection', (socket) => {
  // 用户登录后加入专属房间（用用户ID当房间名）
  socket.on('join-user-room', (userId) => {
    socket.join(userId);
  });

  // 点赞接口中触发通知推送
  app.post('/api/posts/:postId/like', async (req, res) => {
    const { postId } = req.params;
    const currentUserId = req.user._id;
    const post = await Post.findById(postId);
    const authorId = post.author.toString();

    // 创建通知记录
    const newNotify = await Notification.create({
      recipient: authorId,
      content: `${currentUserId} 点赞了你的帖子`,
      type: 'like'
    });

    // 向作者的房间推送新通知
    io.to(authorId).emit('new-notification', newNotify);
    res.json({ success: true });
  });
});

客户端（React） #

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

const socket = io(process.env.REACT_APP_API_URL);

function NotificationsList({ userId }) {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    // 初始化拉取历史通知
    const loadHistory = async () => {
      const res = await axios.get(`/api/notifications/${userId}`);
      setNotifications(res.data);
    };
    loadHistory();

    // 加入用户专属房间
    socket.emit('join-user-room', userId);

    // 监听新通知
    const handleNewNotify = (notify) => {
      setNotifications(prev => [notify, ...prev]);
    };
    socket.on('new-notification', handleNewNotify);

    // 组件卸载时清理监听
    return () => {
      socket.off('new-notification', handleNewNotify);
    };
  }, [userId]);

  return (
    <div>
      {notifications.map(notify => (
        <div key={notify._id}>{notify.content}</div>
      ))}
    </div>
  );
}

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