как я должен использовать реагировать ленивый-загрузки - PullRequest
Новая
       12

как я должен использовать реагировать ленивый-загрузки

0 голосов
/ 08 мая 2019

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

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

Gallary render

render() {
    return (
      <div className="gallery-root"  
           id = "gallery-id"
           ref = "iScroll"
           >
        {this.state.images.map(dto => {
          return <Image 
                  key={'image-' + dto.id} 
                  dto={dto}
                  galleryWidth={this.state.galleryWidth}
                  callBack = {this.cloneHandler.bind(this)}
                  displayImage = {this.renderImage.bind(this)}
                  />;
        })}
      </div>
    );
  }

Image Render

render() { 

    return ( 
      <div  
        className="image-root"
        style={{
          backgroundImage: `url(${this.urlFromDto(this.props.dto)})`,
          width: this.state.size + 'px',
          height: this.state.size + 'px',
          filter: this.state.filter
        }}
        > 
        <div>
          <FontAwesome 
                      className="image-icon" 
                      name="clone" 
                      title="clone"
                      onClick = {this.ClickCloneHandler.bind(this) } />
          <FontAwesome className="image-icon" name="filter" title="filter"
                       onClick = {this.ClickFilterHandler}/>
          <FontAwesome className="image-icon" name="expand" title="expand"
                        onClick = {this.ClickExpandHandler.bind(this)}/>
        </div>
      </div> 
    );
  }

Я хочу лениво загрузить изображения и улучшить производительность браузера.

Может быть, использовать функции реагирования жизненных циклов для достижения максимальной производительности?

Какова наилучшая практика для этого случая?

...