我在组件中实现了一个反应虚拟砖石网格,如下所示:
const MasonrySubmissionRender = (media: InputProps) => {
function cellRenderer({ index, key, parent, style }: MasonryCellProps) {
//const size = (media.submissionsWithSizes && media.submissionsWithSizes.length > index) ? media.submissionsWithSizes[index].size : undefined
//const height = size ? (columnWidth * (size.height / size.width)) : defaultHeight;
function getCard(index: number, extraProps: any) {
var Comp = media.cardElement ? media.cardElement : SubmissionCard
return <Comp submission={media.media[index]} {...media.customCardProps} />
}
return (
<div>
<CellMeasurer
cache={cache}
index={index}
key={key}
parent={parent}>
<div style={style}>
{getCard(index, media.customCardProps)}
</div>
</CellMeasurer>
</div>
);
}
return (
<Masonry
overscanByPixels={1000}
autoHeight={false}
cellCount={media.media.length}
cellMeasurerCache={cache}
cellPositioner={cellPositioner}
cellRenderer={cellRenderer}
style={{ backgroundColor: 'red' }}
height={900}
width={900}
/>
);
};
它呈现了一个相当复杂的组件列表,其中包含一系列芯片,css动画等。
由于这种渲染非常慢,即使使用react-virtualized。
我想在imgur.com中实现一个系统,该组件本身不需要加载就立即显示一个轮廓,而我可以让该组件准备在后台渲染。
我知道在滚动过程中有一种方法可以换出该组件,但是他会隐藏所有隐藏的组件,包括已经渲染过的组件。
答案 0 :(得分:1)
就像所有反应虚拟化的单元格/行渲染器一样,masonry's cell render被传递了isScrolling
属性。当砌体滚动时,您可以渲染一个占位符而不是单元格内容:
if (isScrolling) return (
<div>placeholder</div>
);
此外,每当重新提供无状态组件时,您都将重新创建所有函数。这会给垃圾收集器带来额外的开销,也可能导致不必要的组件重新呈现。
将组件转换为类组件。 cellRenderer
应该是一个实例方法(使用类属性或在构造函数中绑定)。 getCard
可以是一个类方法,也可以从组件中提取它,并在调用函数时传递media
。
您的代码应该是这样的(未经测试):
function getCard(media: InputProps, index: number) {
var Comp = media.cardElement ? media.cardElement : SubmissionCard
return <Comp submission = {
media.media[index]
} { ...media.customCardProps }
/>
}
class MasonrySubmissionRender extends React.Component {
cellRenderer = ({
index,
key,
parent,
style,
isScrolling
}: MasonryCellProps) => {
if (isScrolling) return (
<div>placeholder</div>
);
return (
<div>
<CellMeasurer
cache={cache}
index={index}
key={key}
parent={parent}>
<div style={style}>
{getCard(media, index)}
</div>
</CellMeasurer>
</div>
);
}
render() {
return (
<Masonry
overscanByPixels={1000}
autoHeight={false}
cellCount={media.media.length}
cellMeasurerCache={cache}
cellPositioner={cellPositioner}
cellRenderer={this.cellRenderer}
style={{ backgroundColor: 'red' }}
height={900}
width={900}
/>
);
}
}