【问题标题】:Meteor 1.4 - React data loading techniques best practiceMeteor 1.4 - React 数据加载技术最佳实践
【发布时间】:2016-10-10 17:05:27
【问题描述】:

我正在使用 Meteor 1.4 / React 构建一个中型应用程序。所以我试图在构建我的应用程序时找到 Meteor 1.4 / React 之间数据处理的“最佳实践”。

目前我正在使用 createContainer 来处理 Meteor 和 React 组件之间的数据,如下例所示。

话虽如此,我已经阅读了许多关于使用 Meteor 包/功能(如 React Komposer、TrackerReact 和 React Document 容器)的文章/论坛帖子。

所以我不确定对于随着时间的推移规模会增加的中型项目,哪一个最适合。所以我想知道是否有人通过了类似的经历/尝试过这些包可以与我分享他们的经验?

提前感谢您的帮助和时间

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

【问题讨论】:

  • 如果我是你,我会避免使用createContainer。有一个很大的problem in it's implementation,如果您的计算被某些反应性数据源无效,它会导致重新评估所有包装的订阅。这是错误的,因为当您的订阅参数不更改时,来自该订阅的数据应该保持不变。
  • 感谢您的帮助,您介意告诉我,您会推荐什么来替代中型 Meteor 1.4 项目的 createContainer 吗?说了这么多,很抱歉我没有在这里说清楚,所以请您详细说明一下吗?根据我到目前为止的理解,您的意思是它会重新评估容器中的所有订阅,即使是那些没有在服务器上更改数据的订阅,我说得对吗?谢谢
  • 简而言之,我建议使用react-komposer。稍后我会写更多。

标签: reactjs meteor


【解决方案1】:

我做事的方式与您目前为一个相当大的生产项目做事的方式相同,而且它似乎工作得很好。我相信这是 MDG 推荐的方法。

【讨论】:

  • 感谢您分享您的经验,您介意分享您在 Meteor 1.4 下如何处理 React 组件中的状态(状态管理)吗?谢谢
  • 当然,抱歉花了这么长时间。我将 createContainer 与 SubsManager 包一起使用。示例:export default CustomContainerData = createContainer(() =&gt; { 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: [], }; }
  • 因为评论长度有限制,我也必须添加这条评论来完成我的示例。您可以像这样访问/设置状态:unfoldOpportunity(campaignId) { if (this.state.statea === campaignId) { this.setState({ statea: 0 }); } else { this.setState({ statea: campaignId }); } } 我承认管理复杂的 UI 可能会很棘手,但是当它到达那个点时,我通常需要将 UI 重构为单独的组件。
猜你喜欢
  • 2020-01-21
  • 1970-01-01
  • 2015-04-05
  • 2018-12-06
  • 1970-01-01
  • 2011-09-21
  • 1970-01-01
  • 2011-04-17
  • 1970-01-01
相关资源
最近更新 更多