我遇到了一个简单的占位符应该被另一个等待异步数据的组件替换的情况。当数据可用时,正在渲染依赖组件。例如,想象一个加载微调器/骨架,然后将其替换为用户列表。
问题是,占位符应该在 1 帧内被替换,以便组件的整体高度不断保持。情况并非如此,因为渲染需要一些时间,这会导致弹跳效果。
以下片段作为简化示例给出:
render() {
{dataAvailable ? renderPlaceholder : renderDeepComponentTree}
}
在我的某些情况下,替换需要 50-150 毫秒,这使得页面高度反弹。
有什么解决办法吗?