Question

我构建了一个应用程序，它很快就很酷，直到我添加了一堆数据来测试它。我开始只使用Contacts collection，并添加了28,000条记录。现在我的联系人页面加载至少需要30到60秒，有时甚至会崩溃浏览器。

据我所知，28,000条记录并不多，而且我可以加载与“联系人”相关的其他数据，例如根据我的逻辑，大约80,000条记录的费用，其中每个联系人可以有2-3条记录的费用。因此，仅使用“联系人和收费”加载页面（可能还有更多其他数据），需要加载大约110,000条记录，直到我让渲染页面为止。这是代码示例（类似但我的页面要复杂得多）：

import React, { PropTypes } from "react";
import { createContainer } from "meteor/react-meteor-data";

import { Contacts } from '../api/contacts.js';
import { Charges } from '../api/charges.js';

class SingleContactRow extends React.Component {

    renderCharges() {
        const {contact, charges} = this.props;

        let contactCharges = [];
        charges.forEach(function(charge) {
            if (charge.contactId === contact._id) {
                contactCharges.push(charge);
            }
        });

        return contactCharges.map((charge, i) => (
            <div key={charge._id}>
                Charge #{i}: {charge.name} _ ${charge.amount}
            </div>
        ));
    }

    render() {
        const {contact} = this.props;

        return (
            <div><b>{contact.name}</b></div>
            <div>{this.renderCharges()}</div>
        );
    }
}

class ContactsComponent extends React.Component {

    renderContacts() {
        const {contacts, charges} = this.props;

        return contacts.map((contact) => (
            <SingleContactRow key={appointment._id} contact={contact} charges={charges} />
        ));
    }

    render() {
        const {loadingContacts, loadingCharges} = this.props;

        if (!loadingContacts && !loadingCharges) {
            return(
                <div>
                    {this.renderContacts()}
                </div>
            );
        } else {
            return(
                <div>Loading ... </div>
            );
        }    
    }
}

ContactsComponent.propTypes = {
    contacts: PropTypes.array.isRequired,
    charges: PropTypes.array.isRequired,
};

export default createContainer(({ params }) => {

    const contactsHandle = Meteor.subscribe('contacts');
    const loadingContacts = !contactsHandle.ready();

    const chargesHandle = Meteor.subscribe('charges');
    const loadingCharges = !chargesHandle.ready();

    return {
        loadingContacts,
        contacts: Contacts.find({}, { sort : { createdAt : -1 } }).fetch(),
        loadingCharges,
        charges: Charges.find({}).fetch(),
    };

}, ContactsComponent);

我上面做了什么：

我订阅了数据
我等到所有数据都被加载，同时向用户呈现“正在加载...”消息
然后我渲染联系人
然后循环完成所有费用并将属于该特定联系人的费用推入阵列（我在这里看到问题）
每次联系的退货费用

如果我有30,000条联系人记录和90,000条费用记录，则此页面至少需要一两分钟才能呈现。如何改善这种情况？

流星/反应应用 - 很多数据都很慢

0 个答案: