vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
558 Commits 32 Branches 1 Tag
9b836e20598c2df432b0c5e3cb62c972f8e4a79a
Commit Graph

32 Commits

Author SHA1 Message Date
zdl
8f3181f25b fix(notification): 修复 Socket 重连后通知功能失效问题（方案2） 
采用完全重构的方式解决 Socket 重连后事件监听器丢失和闭包陷阱问题。

## 核心问题
1. Socket 重连后，事件监听器被重复注册，导致监听器累积或丢失
2. 闭包陷阱：监听器捕获了过期的 addNotification 函数引用
3. 依赖循环：registerSocketEvents 依赖 addNotification，导致频繁重新创建

## 解决方案（方案2：完全重构）

### 1. 使用 Ref 存储最新函数引用
```javascript
const addNotificationRef = useRef(null);
const adaptEventToNotificationRef = useRef(null);
const isFirstConnect = useRef(true);
```

### 2. 同步最新函数到 Ref
通过 useEffect 确保 ref.current 始终指向最新的函数：
```javascript
useEffect(() => {
    addNotificationRef.current = addNotification;
}, [addNotification]);
```

### 3. 监听器只注册一次
- useEffect 依赖数组改为 `[]`（空数组）
- socket.on('new_event') 只在组件挂载时注册一次
- 监听器内部使用 `ref.current` 访问最新函数

### 4. 重连时只重新订阅
- Socket 重连后只调用 `subscribeToEvents()`
- 不再重新注册监听器（避免累积）

## 关键代码变更

### NotificationContext.js
- **新增 Ref 定义**（第 62-65 行）：存储最新的回调函数引用
- **新增同步 useEffect**（第 607-615 行）：保持 ref 与函数同步
- **删除 registerSocketEvents 函数**：不再需要提取事件注册逻辑
- **重构 Socket useEffect**（第 618-824 行）：
  - 依赖数组: `[registerSocketEvents, toast]` → `[]`
  - 监听器注册: 只在初始化时执行一次
  - 重连处理: 只调用 `subscribeToEvents()`，不重新注册监听器
  - 防御性检查: 确保 ref 已初始化再使用

## 技术优势

### 彻底解决重复注册
- ✅ 监听器生命周期与组件绑定，只注册一次
- ✅ Socket 重连不会触发监听器重新注册

### 避免闭包陷阱
- ✅ `ref.current` 始终指向最新的函数
- ✅ 监听器不受 useEffect 依赖变化影响

### 简化依赖管理
- ✅ useEffect 无依赖，不会因状态变化而重新运行
- ✅ 性能优化：减少不必要的函数创建和监听器操作

### 提升代码质量
- ✅ 逻辑更清晰：所有监听器集中在一个 useEffect
- ✅ 易于维护：依赖关系简单明了
- ✅ 详细日志：便于调试和追踪问题

## 验证测试

### 测试场景
1. ✅ 首次连接 + 接收事件 → 正常显示通知
2. ✅ 断开重连 + 接收事件 → 重连后正常接收通知
3. ✅ 多次重连 → 每次重连后通知功能正常
4. ✅ 控制台无重复注册警告

### 预期效果
- 首次连接: 显示 "✅ 首次连接成功"
- 重连成功: 显示 "🔄 重连成功!" (不显示 "registerSocketEvents() 被调用")
- 收到事件: 根据页面可见性显示网页通知或浏览器通知

## 影响范围
- 修改文件: `src/contexts/NotificationContext.js`
- 影响功能: Socket 连接管理、事件监听、通知分发
- 兼容性: 完全向后兼容，无破坏性变更

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-11 13:35:08 +08:00
zdl
004266f663 feat: 添加调试 API 
- 我修改 NotificationContext.js，暴露 addNotification 到 window
    - 或者在调试工具 (devtools/notificationDebugger.js) 中添加测试方法
    - 重新构建并部署
    - 可以手动触发网页通知
 2025-11-11 11:45:19 +08:00
zdl
aee79cd14d feat: 通知调试能力 2025-11-10 20:05:53 +08:00
zzlgreat
3bace2f402 事件中心不提示通知修复 2025-11-10 14:20:42 +08:00
zzlgreat
6e2db2b90f 事件中心不提示通知修复 2025-11-10 13:46:34 +08:00
zzlgreat
2e9a1a6afa 事件中心ui 2025-11-10 12:45:34 +08:00
zdl
ff573e4eef feat: 将 AuthModalProvider 迁移到 Redux 
## 主要改动

### 新增
- 创建 `store/slices/authModalSlice.js` - Redux Slice 管理认证弹窗状态
- 创建 `hooks/useAuthModal.js` - 自定义 Hook，组合 Redux 状态和业务逻辑

### 修改
- 更新 `store/index.js` - 添加 authModal reducer
- 更新 `App.js` - 移除 AuthModalProvider 包裹层
- 更新 5 个组件的 import 路径：
  - AuthFormContent.js
  - AuthModalManager.js
  - WechatRegister.js
  - HomeNavbar.js
  - ProtectedRoute.js

### 删除
- 删除 `contexts/AuthModalContext.js` - 旧的 Context 实现

## 迁移效果

- ✅ 减少 Provider 嵌套层级（4层 → 3层）
- ✅ 统一状态管理架构（Redux）
- ✅ 更好的调试体验（Redux DevTools）
- ✅ 保持 API 兼容性（无破坏性修改）

## 技术细节

- 使用 `useRef` 存储 `onSuccessCallback`（函数不可序列化）
- 保持与 AuthContext 的依赖关系（AuthProvider 暂未迁移）
- 所有业务逻辑保持不变，仅改变状态管理方式

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-30 13:22:45 +08:00
zdl
35adabb87e feat: 将 IndustryProvider (176行) 完整迁移到 Redux 2025-10-30 12:54:32 +08:00
zzlgreat
3ed5eb4d00 整合register端口进入login端口 2025-10-28 11:20:50 +08:00
zdl
af012ae8d0 feat:. mockSocketService 添加 connecting 状态 
- 新增 connecting 标志防止重复连接
  - 在 connect() 方法中检查 connected 和 connecting 状态
  - 连接成功或失败后清除 connecting 标志\
2. NotificationContext 调整监听器注册顺序

  - 在 useEffect 中重新排序初始化步骤
  - 第一步：注册所有事件监听器（connect, disconnect, new_event 等）
  - 第二步：获取最大重连次数
  - 第三步：调用 socket.connect()
  - 使用空依赖数组 [] 防止 React 严格模式重复执行\
3. logger 添加日志限流

  - 实现 shouldLog() 函数，1秒内相同日志只输出一次
  - 使用 Map 缓存最近日志，带最大缓存限制（100条）
  - 应用到所有 logger 方法：info, warn, debug, api.request, api.response
  - 错误日志（error, api.error）不做限流，始终输出\
修复 emit 时机确保事件被接收

  - 在 mockSocketService 的 connect() 方法中
  - 使用 setTimeout(0) 延迟 emit(connect) 调用
  - 确保监听器注册完毕后再触发事件\
 2025-10-27 13:13:56 +08:00
zdl
47e4cc451b feat: session 添加节流检查 2025-10-24 17:09:42 +08:00
zdl
509b120c8d feat: 添加修改行业分类不展示的问题 2025-10-24 13:30:52 +08:00
zdl
07ff71c28b feat: 使用静态行业数据 2025-10-24 12:32:14 +08:00
zdl
24db927e20 feat: user 依赖优化 2025-10-24 12:19:37 +08:00
zdl
aa39abbfd9 feat: 消息通知能力测试 2025-10-23 15:25:36 +08:00
zdl
cc743a3032 feat: 调整行业请求数据结构 2025-10-23 14:24:26 +08:00
zdl
34ca3afb82 feat: 权限引导能力测试 2025-10-22 15:23:36 +08:00
zdl
a4fd3dd309 feat: 修改文件 │ 
│                                                                                           │
     │ 1. src/services/socketService.js - 指数退避 + 无限重试                                    │
     │ 2. src/components/ConnectionStatusBar/index.js - UI 优化 + 自动消失                       │
     │ 3. src/App.js - handleClose 实现 + dismissed 状态管理                                     │
     │ 4. src/contexts/NotificationContext.js - 添加成功状态检测                                 │
     │ 5. NOTIFICATION_SYSTEM.md - v2.11.0 文档更新
 2025-10-21 18:34:38 +08:00
zdl
9375d2ba14 feat: sockt 弹窗功能添加 2025-10-21 17:50:21 +08:00
zdl
d0ad51cc17 feat: 添加消息推送能力 2025-10-21 15:48:38 +08:00
zdl
ced6dbc559 feat: 添加消息推送能力，添加新闻催化分析页的合规提示 2025-10-21 10:59:52 +08:00
zdl
7181fae958 feat: 日志优化 2025-10-18 17:33:15 +08:00
zdl
424409b1ab feat: 1. 基础设施（2个文件） 
- ✅ src/utils/logger.js - 统一日志工具
    - API 请求/响应/错误日志
    - 组件错误/警告/调试日志
    - 开发环境详细分组，生产环境仅错误
  - ✅ src/utils/axiosConfig.js - axios 全局拦截器
    - 自动记录所有请求/响应
    - 统一 baseURL 和 credentials 配置\
2. 核心文件重构（8个文件）\
 AuthFormContent.js | ✅ 保留登录/注册成功 toast❌ 移除验证码发送 toast✅ 添加 .trim()✅ 所有 API 添加 logger | ✅ 完成 |
  | Center.js          | ❌ 移除所有 toast✅ 移除 toast 依赖✅ 添加错误 logger                         | ✅ 完成 |
  | Community/index.js | ❌ 移除所有 toast 和导入✅ 移除 toast 依赖✅ 添加错误 logger                     | ✅ 完成 |
  | authService.js     | ✅ 统一 apiRequest 函数✅ 所有请求自动记录❌ 移除 console.error                 | ✅ 完成 |
  | eventService.js    | ✅ 重构 apiRequest✅ 所有方法添加 logger❌ 移除 console.log/error           | ✅ 完成 |
  | stockService       | ✅ 所有方法添加 logger❌ 移除 console 输出                                 | ✅ 完成 |
  | indexService       | ✅ 添加 logger❌ 移除 console 输出                                     | ✅ 完成 |
  | AuthContext.js     | ✅ 保留注册/登出成功 toast❌ 移除验证码发送 toast✅ 所有方法添加 logger                | ✅ 完成 |\
3. Mock 数据完善（\
 Mock 数据完善（1个文件）

  - ✅ src/mocks/handlers/account.js - 个人中心 Mock
    - ✅ 自选股列表 (GET /api/account/watchlist)
    - ✅ 实时行情 (GET /api/account/watchlist/realtime)
    - ✅ 添加自选股 (POST /api/account/watchlist/add)
    - ✅ 删除自选股 (DELETE /api/account/watchlist/:id)
    - ✅ 关注的事件 (GET /api/account/events/following)
    - ✅ 事件评论 (GET /api/account/events/comments)
    - ✅ 当前订阅 (GET /api/subscription/current)\
4. API 文档（1个文件）

  - ✅ API_ENDPOINTS.md - 完整 API 接口文档
    - 认证相关: 4个接口
    - 个人中心: 12个接口
    - 事件相关: 12个接口
    - 总计: 28+个接口\
5。Toast 策略执行:
  - ✅ 保留: 3种（登录成功、注册成功、登出成功）
  - ❌ 移除: 15+处（验证码、数据加载等）

  Logger 替换:
  - ✅ console.log → logger.debug/logger.info
  - ✅ console.error → logger.error\- console.warn → logger.warn

  Mock 数据:
  已有: auth.js, event.js, users.js, events.js
  新增: account.js（7个新接口）
6.用户体验改进
  静默优化:不再弹出验证码发送成功提示（静默处理）不再弹出数据加载失败提示（console 记录） 仅在关键操作显示 toast（登录/注册/登出）

  开发体验: Console 中有清晰的分组日志（🌐 🔴 ⚠️ 等图标）， 所有 API 请求/响应自动记录，错误日志包含完整上下文和堆栈，Mock 服务完善
 测试场景: 登录/注册 - 仅显示成功 toast，验证码静默发送 个人中心 - 加载自选股、实时行情、关注事件 社区页面 - 加载事件列表、Console 查看
9. 添加日志：API Request / ✅ API Response / ❌ API Error
 2025-10-18 07:48:00 +08:00
zdl
d85255fa04 pref: 去除开发环境配置 2025-10-16 15:54:57 +08:00
zdl
b80883065b feat: 手机验证码调试 2025-10-16 10:09:15 +08:00
zdl
96071af39a feat: 登陆注册UI调整，用户协议和隐私政策跳转调整 2025-10-15 11:03:00 +08:00
zdl
78a9e43afb pref: 代码打包优化 2025-10-13 19:53:13 +08:00
zdl
eaf12a4b59 feat: 解决权限校验阻塞页面渲染问题 2025-10-13 16:40:06 +08:00
zdl
2c2e8503ff feat: 修复JS配置错误 2025-10-11 21:26:31 +08:00
zdl
c1132cd0d6 feat: 10.10线上最新代码提交 2025-10-11 16:16:02 +08:00
zzlgreat
4d0dc109bc updated 2025-10-11 12:10:00 +08:00
zzlgreat
8107dee8d3 Initial commit 2025-10-11 12:02:01 +08:00