Vanilla JS+jQuery项目迁移React 18：新旧模块状态共享方案咨询

针对你逐步迁移大型 SPA 的场景，这里按轻量到重度的顺序给出不同方案，你可以根据共享范围、复杂度选择：

一、全局事件总线（临时小范围共享首选） #

利用浏览器原生自定义事件或 jQuery 事件系统实现双向通信，无需引入新依赖，适合单个/少数模块临时共享数据。

实现示例： #

1. jQuery 向 React 推送数据

// jQuery 模块中
$(document).trigger('user-profile-updated', {
  id: 123,
  name: 'John Doe'
});

2. React 监听事件并更新状态

import { useEffect, useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const handleUpdate = (e) => {
      setUser(e.detail);
    };
    // 监听自定义事件
    document.addEventListener('user-profile-updated', handleUpdate);
    // 清理监听避免内存泄漏
    return () => document.removeEventListener('user-profile-updated', handleUpdate);
  }, []);

  return <div>{user?.name}</div>;
}

3. React 向 jQuery 推送数据

// React 组件中
const handleCartChange = (newCart) => {
  document.dispatchEvent(new CustomEvent('cart-items-updated', {
    detail: newCart
  }));
};

// jQuery 模块中
$(document).on('cart-items-updated', (e) => {
  const newCart = e.detail;
  // 更新 jQuery 渲染的购物车 UI
  $('.cart-count').text(newCart.length);
});

二、自定义全局状态对象（中等规模共享首选） #

封装一个带发布订阅功能的全局状态容器，比事件总线更结构化，适合多模块共享统一数据结构的场景。

实现示例： #

// global-state.js
const state = {
  user: null,
  cart: []
};

// 存储各状态对应的订阅回调
const subscribers = new Map();

// 订阅状态变化
function subscribe(key, callback) {
  if (!subscribers.has(key)) subscribers.set(key, []);
  subscribers.get(key).push(callback);
}

// 取消订阅
function unsubscribe(key, callback) {
  if (!subscribers.has(key)) return;
  subscribers.set(key, subscribers.get(key).filter(cb => cb !== callback));
}

// 更新状态并通知订阅者
function setState(key, value) {
  state[key] = value;
  subscribers.get(key)?.forEach(cb => cb(value));
}

// 获取当前状态
function getState(key) {
  return state[key];
}

export { subscribe, unsubscribe, setState, getState };

1. jQuery 中使用

import { setState, getState, subscribe } from './global-state';

// 获取当前用户
const currentUser = getState('user');

// 更新用户状态
setState('user', { id: 123, name: 'Jane Doe' });

// 监听购物车变化
const unsubscribeCart = subscribe('cart', (newCart) => {
  $('.cart-total').text(newCart.reduce((sum, item) => sum + item.price, 0));
});
// 页面销毁时取消订阅
unsubscribeCart();

2. React 组件中使用

import { useState, useEffect } from 'react';
import { subscribe, unsubscribe, getState } from './global-state';

function CartSummary() {
  const [cart, setCart] = useState(getState('cart'));

  useEffect(() => {
    const handleCartUpdate = (newCart) => setCart(newCart);
    subscribe('cart', handleCartUpdate);
    return () => unsubscribe('cart', handleCartUpdate);
  }, []);

  return <div>总价：{cart.reduce((sum, item) => sum + item.price, 0)}</div>;
}

三、Redux（大规模/全栈 React 迁移首选） #

如果你的应用状态逻辑复杂，且确定未来会完全迁移到 React，Redux（推荐搭配 Redux Toolkit）不算过度设计——它提供统一的状态管理、调试工具，且全 React 化后可直接沿用。

核心思路： #

• jQuery 直接调用 Redux Store 的 dispatch 触发状态更新，或通过 subscribe 监听状态变化；
• React 组件用 useSelector 和 useDispatch 接入状态。

实现示例： #

// store.js（Redux Toolkit 示例）
import { configureStore, createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: null,
  reducers: {
    updateUser: (state, action) => action.payload
  }
});

const cartSlice = createSlice({
  name: 'cart',
  initialState: [],
  reducers: {
    addItem: (state, action) => {
      state.push(action.payload);
    }
  }
});

export const store = configureStore({
  reducer: {
    user: userSlice.reducer,
    cart: cartSlice.reducer
  }
});

export const { updateUser } = userSlice.actions;
export const { addItem } = cartSlice.actions;

1. jQuery 中使用

import { store, updateUser } from './store';

// 获取当前状态
const currentUser = store.getState().user;

// 触发状态更新
store.dispatch(updateUser({ id: 123, name: 'John Doe' }));

// 监听状态变化
const unsubscribe = store.subscribe(() => {
  const newCart = store.getState().cart;
  $('.cart-count').text(newCart.length);
});

2. React 组件中使用

import { useSelector, useDispatch } from 'react-redux';
import { addItem } from './store';

function AddToCartButton({ item }) {
  const dispatch = useDispatch();
  const cart = useSelector(state => state.cart);

  return (
    <button onClick={() => dispatch(addItem(item))}>
      加入购物车（当前共{cart.length}件）
    </button>
  );
}

方案选择建议 #

• 临时小范围共享：用全局事件总线，快速实现无额外成本；
• 中等规模结构化共享：用自定义全局状态对象，可控性更强，适合中期过渡；
• 大规模/全 React 规划：用 Redux Toolkit，虽然有学习成本，但能统一状态逻辑，避免后续重复重构。

注意事项 #

• 约定单一数据源：同一状态尽量只由一方（React 或 jQuery）负责修改，避免冲突；
• 清理监听：React 组件中务必在 useEffect 返回函数里取消订阅，防止内存泄漏；
• 精简共享数据：只放入跨模块需要共享的核心数据，不要冗余存储。

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