Meteor 1.4 — лучшие методы загрузки данных React

#reactjs #meteor

#reactjs #meteor

Вопрос:

Я использую Meteor 1.4 / React для создания приложения среднего размера. итак, я пытаюсь найти «наилучшую практику» для обработки данных между Meteor 1.4 / React, которой следует следовать при создании моего приложения.

На данный момент я использую createContainer для обработки данных между компонентами Meteor и React, как показано в примере ниже.

Сказав это, я читал во многих статьях / сообщениях на форумах об использовании пакетов / функций Meteor, таких как React Komposer, TrackerReact и React Document container.

Поэтому я не уверен, какой из них лучше всего использовать для проекта среднего размера, который со временем увеличится в размерах. Итак, мне было интересно, может ли кто-нибудь, прошедший с аналогичным опытом / попробовавший эти пакеты, поделиться со мной своим опытом?

Заранее спасибо за вашу помощь и время

   import React, { Component } from 'react';
  import { createContainer } from 'meteor/react-meteor-data';

  export default class DDOrganization extends Component {

      getOrganizations(){
        let org = this.props.org;
        return Organizations.find({'name': {'$regex': org}});
      }

      renderOrganizations(){
        return this.getOrganizations().bind(this).map((org) => {
          return (
            <li key={org._id}><a href="#" data-id={org._id} onClick={this.props.setOrgState}>{org.name}</a></li>
          )
        });
      }

      render(){
          let {organizations} = this.props;
          return (
              <ul className="select-organization-list">
                  {this.renderOrganizations().bind(this)}
              </ul>
          )
      }

  };


  export default createContainer(() => {

      let organizations = {};
      let {org} = this.props;
      let orgSub = Meteor.subscribe("OrgSubscription", org);

      if(orgSub.ready()){
          organizations = Organizations.find({'name': {'$regex': org}}).fetch();
      }

      return {
          organizations: organizations
      }

  }, DDOrganization);
  

Комментарии:

1. На вашем месте я бы не стал использовать createContainer . В его реализации есть большая проблема , которая приводит к переоценке всех подписок, если ваши вычисления становятся недействительными из-за какого-либо реактивного источника данных. Это неправильно, потому что, когда параметры вашей подписки не изменяются, данные, поступающие из этой подписки, должны оставаться нетронутыми.

2. Спасибо за вашу помощь, не могли бы вы сказать мне, что бы вы порекомендовали в качестве альтернативы createContainer для проекта Meteor 1.4 среднего размера? Сказав это, я сожалею, что не понял этого здесь, так что не могли бы вы уточнить, пожалуйста? Исходя из того, что я понял до сих пор, вы говорите, что он будет пересматривать все подписки в контейнере, даже те, у кого не были изменены данные на сервере, я правильно понял? Спасибо

3. Короче говоря, я предлагаю использовать react-komposer . Я напишу больше чуть позже.

Ответ №1:

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

Комментарии:

1. Спасибо, что поделились своим опытом, не могли бы вы поделиться тем, как вы обрабатываете состояние (управление состоянием) в своих компонентах React в Meteor 1.4? Спасибо

2. Конечно, извините, что это заняло так много времени. Я использую createContainer вместе с пакетом SubsManager. Пример: export default CustomContainerData = createContainer(() => { subsManager1.subscribe('sub1'); subsManager2.subscribe('sub2'); ... return { loading: !(subsManager1.ready() amp;amp; subsManager2.ready() amp;amp; ...), }; }, ReactClassName); Затем конструктор может обрабатывать любые дополнительные элементы состояния, такие как: constructor(props) { super(props); this.state = { statea: 0, stateb: [], }; }

3. И поскольку существует ограничение на длину комментария, мне пришлось добавить этот комментарий, чтобы закончить мои примеры. Вы можете получить доступ / установить состояние следующим образом: unfoldOpportunity(campaignId) { if (this.state.statea === campaignId) { this.setState({ statea: 0 }); } else { this.setState({ statea: campaignId }); } } я признаю, что управлять сложным пользовательским интерфейсом может быть сложно, но мне обычно нужно реорганизовать пользовательский интерфейс на отдельные компоненты, когда он дойдет до этого момента.