小编Coo*_*ama的帖子

随着我进一步实现redux +反应到一个相当复杂的应用程序,这取决于许多API请求加载单个页面,我无法决定是否最好在页面根部有一个容器组件来处理所有异步的东西,并将道具传递给哑组件,与多个容器组件相关,这些组件只关注他们需要的数据,以及获取他们需要的数据.我在这两种模式之间来回走动,发现它们各有利弊:

如果我在顶部放置一个容器组件:

• 亲:所有isFetching道具和fetchSomeDependency()行动都可以在一个地方处理.
• con:真正令人讨厌的缺点是我发现自己不得不通过多个组件转发道具和回调,而树中间的某些组件最终会与此绑定.

这是一个问题的视觉示例,显示了道具所需的关系:

<MyContainer
  data={this.props.data}
  isFetchingData={this.props.isFetchingData}
  fetchData={this.props.fetchData}
 >
   {!isFetchingData && 
     <MyModal
        someData={props.data}
        fetchData={props.fetchData}
      >
       <MyModalContent
         someData={props.data}
         fetchData={props.fetchData}
       >
          <SomethingThatDependsOnData someData={props.someData} />
          <SomeButtonThatFetchesData  onClick={props.fetchData} />
        </MyModalContent>
      </MyModal>
    }
 </MyContainer>

正如你所看到的,<MyModal />而<MyModalContent />现在需要用什么都没有用它做道具关注,看到一个模式应该能够被重新使用,并且只用一个模式的文体素质有关.

起初上面看起来很棒,但是一旦我有100多个组件,它们都感觉非常纠结,我发现这些顶级容器组件的复杂性太高,我不喜欢,看到他们中的大多数(在应用程序中我"正在努力"取决于3个以上API请求的响应.

然后我决定尝试多个容器:

• 亲:完全不需要转发道具.在某些情况下这样做仍然有意义,但它更灵活.
• 亲:更容易重构的方式.我很惊讶我如何能够在没有任何破坏的情况下显着移动和重构组件,而在其他模式中,事情已经破坏了很多.
• 亲:每个容器组件的复杂性要小得多.我的mapStateToProps并且mapDispatchToProps更加具体到它所在组件的目的.
• con:任何依赖于异步内容的组件总是需要处理isFetching状态.这增加了在单个容器组件中处理它的模式中不必要的复杂性.

所以主要的困境是,如果我使用一个容器,我会在根容器和叶子组件之间的组件中获得这种不必要的复杂性.如果我使用多个容器,我会在叶子组件中获得更多的复杂性,并最终得到需要担心的按钮,isFetching 即使按钮不应该关注它.

我想知道是否有人找到了避免利弊的方法,如果有的话,你遵循的"经验法则"是什么来避免这种情况？

谢谢!

通常在阅读可以传递给方法的参数的文档时,我会在参数列表中看到括号,如下所示:

括号在这种情况下意味着什么？为什么是逗号内部括号？

是否可以使用javascript控制覆盖firefox扩展？我已经提取了扩展的内容,并确定了我需要运行的函数/方法,但是它们在控制台的范围内是不可访问的.

提前感谢任何想法.

通常我想写一些返回"是"的东西,如果true,"否"如果false,或"NA"(或任何其他字符串真的)if nil.目前我这样做:

@contact.boolean ? 'Yes' : (@contact.boolean.nil? ? "NA" : "No")

这是写这个的最短路吗？