React -如何在基于逻辑的组件更改期间防止延迟?

Question

这是我的代码:

export const StyledCard = (props: CardProps) => {
const [loaded, setLoaded] = React.useState<boolean>(false);

return (
<StyledContainer>
{<StyledImage onLoad={() => setLoaded(true)} src={props.imageURL} alt=""/>}
{!customImageLoaded && <ComponentWhichIsNotAnImageAndCannotBeUsedAsFallbackSource />}
</StyledContainer>
)
}

我有一个状态，以便在图像未加载时呈现占位符组件。然而，当图像最终加载时，有一小段时间(图像和占位符组件)都被渲染，这使得容器的高度增加了一倍，然后最终删除占位符组件。

是否有办法防止这种短的双重渲染?

如果我设置条件{loaded && <img onLoad={() => setLoaded(true)} src={props.imageURL} alt=""/>}，只有占位符呈现，img永远不会加载，因为onLoad永远不会触发loaded为false。

另请注意:占位符组件不是图像，所以我不能使用备用源。

是否有办法优化这一点，防止双重渲染/延迟问题?

Answer 1

我假设您可以使用样式隐藏图像。在这种情况下，图像将被加载，然后您将删除隐藏属性。

export const StyledCard = (props: CardProps) => {
const [loaded, setLoaded] = React.useState<boolean>(false);

return (
<StyledContainer>
{<StyledImage 
style={{display: loaded ? 'block' : 'none'}} 
onLoad={() => setLoaded(true)} src={props.imageURL} alt=""
/>}
{!loaded && <ComponentWhichIsNotAnImageAndCannotBeUsedAsFallbackSource />}
</StyledContainer>
)
}