Оптимизация функции React Map, вызывающая задержку страницы - PullRequest
Новая
       4

Оптимизация функции React Map, вызывающая задержку страницы

0 голосов
/ 13 января 2019

Я создаю баннер слайд-шоу в реакции и использую функцию карты, чтобы перебрать все изображения в данных состояния и выбрать соответствующую анимацию для отображения или скрытия в зависимости от индекса.

Единственная проблема заключается в том, что при более высоком разрешении дисплея наблюдается значительная задержка.

Я почти уверен, что это связано с реакцией повторного рендеринга нескольких элементов, поэтому мне просто интересно, есть ли лучшее решение, которым я мог бы воспользоваться?

К вашему сведению, есть лучшая альтернатива использованию конкатенации строк, как я делал ниже. Я относительно новичок, чтобы реагировать, и для меня имеет смысл сделать это так.

Пожалуйста, смотрите функцию карты ниже 

           {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>
                );
...