Question

所以，我试图用 fetch（）获取一个JSON API并迭代它并在Reactjs中呈现它。它实际上可以很好地使用最多100个项目的小json列表。但是当我用900个项目及以上的json列表尝试相同的事情时，它需要相当长的一段时间，整个网站不再响应并且变得非常缓慢。

那么我在这里做错了什么以及我可以修复什么来使网站更快？

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：

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

问题所在的代码中并不清楚。可能的罪魁祸首：

您的后处理逻辑（_.zip，_.sortBy）速度很慢，导致用户界面锁定。我首先考虑这些操作，看看它们是否代表了一个重大瓶颈。
您最终会遇到大量DOM元素，这会导致页面显得迟缓。有各种方法来解决这个问题，但分页或无限滚动是最好的头脑方法。您可以尝试FixedDataTable为大型数据表提供良好的延迟呈现实现。

Answer 2

使用element.innerHTML甚至可以直接在DOM中渲染900个项目。因此，您可能希望使用像https://github.com/seatgeek/react-infinite这样的列表实现，它会在您滚动时将内容加载到DOM中。

此外，当您指定key = {index}时，最好使用唯一键，否则如果您在某个时候重新排序或更改列表，React会感到困惑

迭代JSON时反应速度极慢

2 个答案: