优化React Map函数导致页面滞后

Question

我正在用react构建幻灯片横幅，并使用地图功能遍历状态数据中的所有图像，并根据索引选择合适的动画来显示或隐藏。

唯一的问题是，在较高的显示分辨率下，会有大量的滞后。

我很确定这与必须重新渲染多个元素的反应有关，所以我只是想知道是否有可以利用的更好的解决方案？

像下面我所做的那样，FYI有一个更好的替代方法来使用字符串连接。我是一个相对较新的反应者，对我来说这样做很有意义。

请参见下面的地图功能

           {this.state.images.map((v,i)=>{

                let opacity = 0;
                let wrapperClass = "SlideShowBanner parallax";
                let backgroundClasses = "SlideShowBanner__backgroundIMG";
                let innerIMGClass = "SlideShowBanner__container__innerIMG";
                let textWrapper = "SlideShowBanner__container__content__text";
                let zIndex;

                if(this.loaded){
                    if (i !== this.state.slideIndex) {
                        zIndex = 1;
                        innerIMGClass += " outAnim";
                        backgroundClasses += " outAnim"
                        wrapperClass += " hide";
                        textWrapper += " outAnim";
                    }
                    else {
                        zIndex = 0;
                        innerIMGClass += " inAnim";
                        backgroundClasses += " inAnim";
                        textWrapper += " inAnim";
                    }
                }
                else{
                    if (i !== this.state.slideIndex){
                        // Prevent the animation from being seen 
                        // but still present to hide slides
                        zIndex = -1;
                        innerIMGClass += " outAnim";
                        backgroundClasses += " outAnim"
                        wrapperClass += " hide";
                        textWrapper += " outAnim";
                    }
                }

                return(
                    <div
                        className={wrapperClass}
                        style={{
                            zIndex
                        }}
                        key={i}
                    >

                        <div 
                            className={backgroundClasses}
                            style={{
                                backgroundImage: `url(${this.state.images[i]})`,
                                backgroundSize: 'cover'
                            }}
                        ></div>

                        {/* Circle component */}

                        <div className="SlideShowBanner__container">

                            {/* Inner Background IMG */}
                            <div
                                className={innerIMGClass}
                                style={{backgroundImage: `url(${this.state.images[i]})`,}}
                                // ref={this.innerIMG}
                            ></div>

                            {/* RHS Content */}
                            <div className="SlideShowBanner__container__content">
                                <div className={textWrapper}>
                                    <div className="header">{`${this.state.text[i].header}`}</div>
                                    <div className="footnote">{`${this.state.text[i].para}`}</div>
                                </div>
                            </div>

                        </div>
                    </div>
                );