React Native：父组件切换记录时子组件未重新挂载的解决方法

可能的原因 #

• React组件复用机制：React默认会复用同类型组件实例，只要组件类型未变，仅props更新时，不会触发卸载再挂载流程，只会调用componentDidUpdate而非componentDidMount。切换不同记录时，父组件只是更新了传给VisitTimer的props，子组件实例被复用，因此没有重新挂载。
• 路由/页面缓存：如果父组件所在页面被路由框架（比如React Navigation）缓存（如启用keepAlive、lazy等策略），切换记录时父组件本身并未卸载，子组件自然也不会重新挂载。
• 缺失唯一key属性：未给VisitTimer设置唯一key值，React无法区分不同记录对应的子组件实例，会复用旧实例渲染新props，不会触发重新挂载。

解决方法 #

1. 给子组件添加唯一key属性 #

这是最直接的解决方案，用每条记录的唯一标识（比如session的ID）作为key。切换记录时key值变化，React会判定为新组件实例，卸载旧组件并挂载新组件，触发componentDidMount。

修改父组件中VisitTimer的引入代码：

<VisitTimer
  key={this.props.session?.id} // 添加唯一key，使用session的唯一ID
  started={this.props?.session?.dates?.started?.value}
  stopped={this.props?.session?.dates?.completed?.value}
  durationOverride={this.props?.session?.duration?.total?.value}
  maxDuration={maxVisitTime(this.props?.session?.type?.value)}
  visit={this.props?.session}
  ref={(ref) => (this.visitTimer = ref)}
  stopTimeOffset={this.props.visit?.duration?.stopOffset?.value}
  editable={statusCodeToEditableLevel(this.props.session?.status?.value) === 2}
  onChange={this.onSessionTimerChange}
/>

2. 在componentDidUpdate中处理props变化 #

如果不需要强制重新挂载，而是希望在记录切换时执行初始化逻辑，可以在VisitTimer组件中重写componentDidUpdate方法，对比前后props的关键标识（如session ID），发生变化时执行原本在componentDidMount中的初始化操作。

示例：

componentDidUpdate(prevProps) {
  // 对比前后session的唯一标识，判断是否切换了记录
  if (prevProps.visit?.id !== this.props.visit?.id) {
    // 执行原本在componentDidMount中的初始化逻辑
    this.initTimer();
    // 其他需要重置的操作
  }
}

3. 解除页面缓存（若存在） #

如果是路由缓存导致父组件未卸载，需调整路由配置，关闭对应页面的缓存策略。比如在React Navigation中，避免使用persist、keepAlive等缓存配置，或在离开页面时手动重置页面状态，确保切换记录时父组件重新渲染。

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