gpt4 book ai didi

css - React.js 循环图片幻灯片的性能问题

转载 作者:行者123 更新时间:2023-12-02 09:13:12 25 4
gpt4 key购买 nike

我们想要显示看起来像 gif 的图片循环幻灯片。当前结果可以通过以下网址查看:https://figuredevices.com

我们当前的方法是使用不透明度来显示或隐藏幻灯片:

class SlideShow extends React.Component {

constructor(props, context) {
super(props);
this.state = {
currentSlide: 0
};
this.interval = null;

}

componentDidMount() {
this.interval = setInterval(this.transitionToNextSlide.bind(this), 200);
}

componentWillUnmount(){
if(this.interval){
clearInterval(this.interval);
}
}

transitionToNextSlide() {

let nextSlide = this.state.currentSlide + 1;

if (nextSlide == this.props.slides.length) {
nextSlide = 0;
}
this.setState({currentSlide: nextSlide});
}


render () {

let slides = this.props.pictures.map((picture, idx) => {
let slideContainerStyle = {
opacity: this.state.currentSlide == idx ? 1 : 0
};
return(
<div style={slideContainerStyle} key={idx}>
<Slide picture={picture}/>
</div>
);
})

let containerStyle = {
width:'100%'
};

return (
<div style={containerStyle}>
{slides}
</div>
);

}

};

图片以 5×5 的方式加载到 this.props.picture 中。图片的数量没有限制,随着这个数量的增长,我担心性能。我感觉有两件事不太对劲:

  • 渲染方法中的 map 操作每 200 毫秒遍历整个数组,仅更改两个 css 属性。
  • DOM 的大小不断增大,但大多数节点都被隐藏了

您能否建议一种更好的方法,也许使用 animationreact-motion

最佳答案

您应该将所有图片维护为一个数组,并且每 200 毫秒增加一次数组索引。然后,不要每次都显示所有图片,而是让它显示当前索引处的图片。这好多了,因为您只返回一张照片,而不是一堆看不见的照片:)

注意:我无法对此进行测试,因此我不确定所有内容在语法上是否完全正确,但这是总体思路。每 200 毫秒增加一次幻灯片索引。然后,始终返回一个仅包含您想要查看的图片的 div。

class SlideShow extends React.Component {

constructor(props, context) {
super(props);
this.state = {
slideIndex;
};
this.interval = null;

}

componentDidMount() {
this.interval = setInterval(this.transitionToNextSlide.bind(this), 200);
}

componentWillUnmount(){
if(this.interval){
clearInterval(this.interval);
}
}

transitionToNextSlide() {
this.setState({this.state.slideIndex: (this.state.slideIndex + 1) % this.props.slides.length})


render () {
let containerStyle = {
width:'100%'
};

return (
<div style={containerStyle}>
<Slide picture={this.props.pictures[this.state.currentSlide]}/>
</div>
);
}
};

关于css - React.js 循环图片幻灯片的性能问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37262821/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com