JSONを反復処理すると反応が極端に遅くなる

Question

したがって、fetch（）のJSON APIをフェッチしてReactjsでレンダリングしようとしています。それは実際に小さなjsonのリストで100項目までかなりうまく動作します。しかし、900アイテム以上のjsonリストで同じことをしようとすると、かなり時間がかかり、サイト全体がそれ以上反応しなくなり、かなり遅くなります。

ここで私は何が間違っていますか？サイトをより速くするために何ができるのですか？これは、問題がどこにあるか提供されているコードからも明らかではありません

import React from 'react'; 
import API from '../modules/api'; 
import { Grid, Row, Col } from 'react-flexgrid'; 
import Blazy from 'blazy'; 
import _ from 'lodash/collection'; 

class Library extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     library: undefined, 
    }; 
    } 

    componentDidMount() { 
    API.getLibrary(this.props.params.user, (list) => { 
     this.setState({ 
     library: _.sortBy(list, 0), 
     }); 
    }); 
    } 
    render() { 
    var bLazy = new Blazy(); 
    if (this.state.library) { 
     return (
     <div className="content"> 
      <Grid> 
      <Row> 
      {this.state.library.map(function(entry, index) { 
       return (
       <Col key={index} xs={6} md={2}> 
        <Card> 
        <CardTitle>{entry[0]}</CardTitle> 
        </Card> 
       </Col> 
       ); 
      })} 
      </Row> 
      </Grid> 
     </div> 
    ); 
    } 
    return (
     <div> 
     Loading 
     </div> 
    ); 
    } 
} 

export default Library; 

Answer 1

：

API.js

import _ from 'lodash/array';  
const baseURL = 'https://url.com/api/v1'; 
class API { 
    static getLibrary(user, callback) { 
    fetch(`${baseURL}/users/${user}/library`, { 
     method: 'get', 
     headers: { 'Content-type': 'application/json' }, 
    }) 
    .then((response) => { 
     response.json().then((data) => { 
     const titles = []; 
     const status = []; 
     const covers = []; 
     const url = []; 
     const rating = []; 
     const episodesWatched = []; 
     const episodesMax = []; 
     for (const item in data) { 
      titles.push(data[item].library.title); 
      status.push(data[item].status); 
      covers.push(data[item].library.cover_image); 
      url.push(data[item].library.url); 
      rating.push(data[item].rating); 
      episodesWatched.push(data[item].episodes_watched); 
      episodesMax.push(data[item].library.episode_count); 
     } 
     const library = _.zip(
      titles, 
      covers, 
      url, 
      rating, 
      episodesWatched, 
      episodesMax 
     ); 
     callback(library); 
     }); 
    }); 
    } 
} 
export default API; 

Index.jsx。可能な犯人：

• あなたの後処理ロジック（_.zip、_.sortBy）が遅く、UIをロックする原因となります。私は、これらの操作をタイミングし、それらが大きなボトルネックになっているかどうかを見ることから始めます。

• 多くのDOM要素で終わると、ページが遅く表示されます。これを修正するさまざまな方法がありますが、ページ区切りまたは無限スクロールが優れたトップ・オブ・マインドアプローチです。大きなデータテーブルのための良いレイジーレンダリング実装のためにFixedDataTableを試すかもしれません。

Answer 2

element.innerHTMLのDOMで直接900個のアイテムをレンダリングすると処理が遅くなることがあります。だから、このようなリストの実装を使用して、スクロールするときにDOMに物をロードする、https://github.com/seatgeek/react-infiniteを使用することができます。

キー= {インデックス}を割り当てるときにも、それはユニークなキーを使用することをお勧めは、そうでない場合には混同されるだろう反応する、であるあなたが並べ替えたり、いくつかの点