普元 Mobile SlidePage 子页面数据刷新方案

普元 Mobile SlidePage 子页面数据刷新方案

在移动端开发中，页面跳转后的数据同步是个高频痛点。特别是使用 SlidePage 这类组件时，用户从子页面返回主页，往往需要重新拉取最新数据，否则展示的是旧状态。下面分享一种基于事件通知的参数传递方案，既轻量又可靠。

核心思路

主要分两步走：

1. 父页发起：当子页准备关闭（如点击返回）时，携带特定参数或通过全局事件总线发送'刷新'信号。
2. 子页响应：子页在挂载或收到通知时，触发数据加载方法。

具体实现

1. 父页处理返回逻辑

在 SlidePage 的返回事件中，除了常规的路由跳转，记得注入刷新指令。比如在 onBack 钩子里，向路由栈传递一个标志位，或者直接调用事件中心的通知接口。

// 伪代码示例：父页返回逻辑
handleBack() {
  // 标记需要刷新
  this.navigate({ 
    params: { forceRefresh: true },
    event: 'PAGE_REFRESH' 
  });
}

这里要注意，不要只依赖路由参数，因为某些原生容器对参数透传支持有限，配合事件总线更稳妥。

2. 子页接收并执行刷新

子页需要在生命周期合适的位置监听这个信号。如果是 RN 或混合框架，通常在 componentDidMount 或 useEffect 中检查参数，或者订阅全局事件。

// 伪代码示例：子页监听逻辑
componentDidMount() {
  // 检查是否有刷新参数
  if (this.props.route.params?.forceRefresh) {
    this.loadData();
  }
  
  // 或者订阅全局事件
  EventBus.on('PAGE_REFRESH', () => this.loadData());
}

实际运行时，务必注意解绑事件监听器，防止内存泄漏。特别是在页面销毁时，一定要移除对应的回调函数。

避坑指南

• 重复请求：如果用户快速连续进出页面，可能会触发多次刷新。建议加个防抖或者状态锁。
• 生命周期冲突：不要在页面已经卸载的状态下尝试更新 UI，先判断 isMounted 或类似标识。
• 网络超时：刷新操作涉及网络请求，记得加上 Loading 状态提示，提升用户体验。

这种方案不需要引入重型的状态管理库，适合大多数中小型项目。关键是保持父子页通信的契约清晰，让数据流转可预测。