Question

我正在React中构建一个简单的Gallery App，该应用会根据用户输入在flickr API中搜索图像。

当用户加载许多图像时，浏览器可能会变慢，有时甚至完全卡住，如何改善浏览器性能并改善UI？我正在尝试通过延迟加载实现这一目标，但是我正在努力实现它

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> 
    );
  }

我想延迟加载图像并提高浏览器性能。

也许要使用反应生命周期函数以获得最佳性能？

这种情况下的最佳做法是什么？

我应该如何使用反应懒加载

0 个答案: