React Router prop变更引发不必要渲染，如何避免刷新状态提前关闭？

你的核心问题是isRefreshing状态的维护逻辑和路由切换的数据流时机没有对齐，可根据你的项目情况选择以下两种方案解决：

方案1：调整状态归属（优先推荐，从架构层面彻底解决问题） #

你现在把isRefreshing放在单个列表组件内部维护，路由切换时新组件初始化会先拿到旧的listItems，自然会误判为数据更新结束，建议把刷新状态上移到和路由、数据源同层级的App.js中：

• 路由切换时，先把对应路由的isRefreshing标记为true，直到新的过滤后listItems计算/请求完成，再把isRefreshing设为false
• 将isRefreshing作为prop直接传给列表组件，组件只负责消费这个状态展示置灰、禁用效果，不需要自己维护更新逻辑
• 原有点击刷新按钮的逻辑也同步迁移到App层触发，和路由切换的刷新逻辑复用同一套控制规则

方案2：最小改动修复（不调整上层架构的临时方案） #

如果暂时不想动上层的状态结构，可以在列表组件的useEffect中增加校验逻辑，避免旧数据误触发状态更新：

• 给每个列表组件额外传入当前路由对应的status过滤条件参数
• useEffect中先校验更新后的listItems是否全部符合当前路由的过滤规则，只有符合条件时才把isRefreshing置为false
• 参考代码示例：

useEffect(() => {
  // 校验列表所有条目都匹配当前路由的过滤规则
  const isMatchCurrentRoute = listItems.every(item => item.status === currentRouteStatus)
  if (isMatchCurrentRoute) {
    setIsRefreshing(false)
  }
}, [listItems, currentRouteStatus])

额外架构优化建议 #

你目前在App层把全量listItems传给所有路由组件，由组件自行过滤的模式会带来多余的渲染开销，更合理的实现是：

• 在App层根据当前路由的过滤条件，只给对应组件传过滤完成的列表数据，路由切换时直接清空传入的列表，从根源上避免旧数据流入新组件的问题
• 如果数据是异步请求获取的，路由切换时直接取消上一个路由的未完成请求，避免旧请求返回后覆盖新数据

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