确保子组件在父组件更改时重新加载

Question

我正在创建一个现有的react native应用程序的更新实现，我遇到了一种情况，当父组件发生变化时，子组件不会重新加载。

我的情况是这样的:我有一个特定记录的父组件。连接到此的是VisitTimer子组件，它跟踪该记录会话的持续时间。我注意到的是，当我第一次将记录加载到父组件中时，子组件<VisitTimer>与componentDidMount()一起触发。但是，如果退出该屏幕，并加载一个不同的记录，那么子<VisitTimer>组件不会挂载-即VisitTimer子组件中的componentDidMount不会触发。

这里可能的问题是什么?当父组件发生更改时，如何确保子组件总是重新挂载?

下面是父组件中的子组件:

<VisitTimer
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}
/>

Answer 1

查看我的评论，但是强制重新创建它的一种方法是基于记录给它一个唯一的key。在react中，key是特殊的，如果它改变了，整个组件将重新挂载。您可以将键设置为来自记录的唯一id:

<VisitTimer
key={this.props?.session?.guid}
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}
/>

我假设唯一id是在session.guid上。

顺便说一下，在您的情况下，这通常比实现componentDidUpdate要好。人们经常走这条路，并花费大量时间实现重置行为，将状态设置回其原始值，这是bug的来源。改变key保证你有一个新的开始。唯一不应该这样做的时候是为了实现"重置"。如果重新挂载组件和它的子组件是昂贵的

Answer 2

使用key将强制重新渲染，但这不是key的主要目的。React文档确实谈到了像这样使用键，但那些是针对特定用例的。在这种情况下，我鼓励你问自己:

• 我们真的需要重新挂载子组件吗?或者我们只是想让它重新渲染
• 无论以上问题的答案如何。为什么我们需要重新渲染子组件?是因为需要显示更新后的数据吗?
• 如果是，那么子组件应该从父组件或全局状态(在您的情况下可能是记录本身)中接收一个道具。这种类型的道具更改/状态更改将自动触发重新渲染

我希望这是有帮助的，但社区可以更有帮助，如果你可以分享更多的细节，你的问题，如-父组件做什么，什么子渲染，为什么我们希望子重新渲染，等等