React.jsの写真のスライドショーでのパフォーマンスの問題

Question

gifのような写真のループスライドショーを表示したいとします。現在の結果はこのURLに表示されます：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> 
    ); 

    } 

}; 

写真はthis.props.pictureに5で5ロードされます。画像の数は限定されていないので、この数が増えるにつれてパフォーマンスが心配です。 renderメソッドで

• マップ操作は、すべての200msのは2つのだけのCSSプロパティを変更するには、配列全体を横断している：右私には感じていない2つのものがあります。
• DOMのサイズがたくさん成長しているが、ノードのほとんどは

を隠されていますが、多分animationまたはreact-motionを使用して、より良いアプローチを提案しますか？

Answer 1

すべての写真をアレイとして管理し、200ミリ秒ごとにアレイインデックスを増やす必要があります。次に、一度にすべての画像を表示するのではなく、現在のインデックスに画像を表示させるだけです。これは、あなたが目に見えないものの束の代わりに1枚の写真を返すだけなので、はるかに良いです:)

注：私はこれをテストすることができませんでしたので、すべてが正確に構文的に正しいこれは一般的な考えです。 200ミリ秒ごとに、slideIndexをインクリメントします。そして、あなたが見たい1つの画像だけで常に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> 
    ); 
    } 
};