普元 Mobile SlidePage 子页面数据刷新方案
在移动端开发中，页面跳转后的数据同步是个高频痛点。特别是使用 SlidePage 这类组件时，用户从子页面返回主页，往往需要重新拉取最新数据，否则展示的是旧状态。下面分享一种基于事件通知的参数传递方案，既轻量又可靠。
核心思路
主要分两步走：
- 父页发起：当子页准备关闭（如点击返回）时，携带特定参数或通过全局事件总线发送'刷新'信号。
- 子页响应：子页在挂载或收到通知时，触发数据加载方法。
具体实现
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 状态提示，提升用户体验。
这种方案不需要引入重型的状态管理库，适合大多数中小型项目。关键是保持父子页通信的契约清晰，让数据流转可预测。
