Question

我正在构建我的第一个React-Redux应用程序，在很多情况下我可以选择执行<PaginationBox perPage={perPage} />或<PaginationBox />然后执行

function mapStateToProps({pagination: {page}}) {
  return {
    pageNumber: page + 1
  };
}

使用这种或那种方式有什么含义？我应该何时优先选择其中一种？

是否有关于如何拾取道具的既定最佳做法？每次在一些深度嵌套的组件中使用mapStateToProps时，我感觉有点不好，因为感觉组件会耦合到特定页面/应用程序的状态。

Answer 1

没有一个好的答案。根据{{3}}的Redux常见问题解答，由您决定在组件层次结构中连接组件的意义。它可能位于“LeftSidebar / RightMainPanel”级别，也可能更加细化。在某些情况下，例如尝试优化列表以提高性能，您可能会将List本身连接起来并检索项ID，并且每个ListItem本身都会连接并按ID检索自己的数据。

对于这种特殊情况，我可能倾向于连接<PaginationBox />，并根据需要渲染无状态功能<PaginationItem />组件，这主要是因为单个项目不需要任何组件除了数字和链接之外附加的真实信息。但是，这只是一种意见。

Answer 2

您是否已经了解了演示者/容器组件模式？围绕这种模式存在多个good article，这使您在大多数情况下可以很好地了解何时拥有演示者或容器组件

我的建议：

从组件层次结构顶部的一个容器组件（具有mapStateToProps和mapDispatchToProps）开始。下面坚持只接收道具和动作的演示者组件。有段时间您会注意到（A）一个演示者组件本身需要很多属性/操作，或者（B）您正在传递属性/操作许多级别下来，其中只有一些被中间的组件抓住。

然后，您开始与 fat </ em>组件（A）的容器组件交换演示者。当仍然有太多的动作/属性通过（B）时，你需要考虑更多的容器组件，它们可以避免过多的道具/动作传递。

但您的第一条规则可能是：顶部有一个容器组件，下面的所有组件都是演示者。

Answer 3

如果我们想将值/方法传递给子组件，我们使用props。道具用于检查所需的值或方法是否可用于来自某个其他组件的当前组件。我们假设我有两种方法，一种是selection-header，另一种是buyItems。从选择标题中我选择显示的列表中的所有项目，并将其发送到buyItems组件进行购买。这里的buyItems组件需要来自selection-header的值，这是必须的。这种类型的检查完成了投放道具。

我们也可以使用mixins代替使用道具。 Mixins允许我们在当前组件中使用另一种组件方法。

    var selection-header = React.createClass({
      selectItems: function(){
        itemsSelectAll: true
      },
      render: function(){
        return(
         <BuyItems />
       );
      }
   });

var BuyItems = React.createClass({
      mixins: [selection-header],  
    render: function(){
        return(
       );
      }
   });

现在在buyitems组件中我们可以使用选择头方法和变量

Answer 4

这个主题有点主观，并没有硬性规定。所以我只是告诉你我做了什么。

通常，我尝试只连接到容器中的商店（父组件，智能组件等）。然后我将道具从容器传递到未连接到商店的组件（哑组件）。

我总是争取商店的层次结构 - ＆gt;容器 - ＆gt;道具 - ＆gt;零件。

话虽如此，始终坚持这种等级并不总是有意义的只是我总是先尝试做。

我明白你的意思是说，将组件连接到隐藏在组件层次结构中的商店可能会感觉有点脏，更不用说难以维护了。

这是关于智能/哑组件或容器/组件的好文章： Smart and dumb components in React

在React / Redux应用程序中，我应该何时明确传递一个prop，而不是使用mapStateToProps从全局状态中提取它？

4 个答案: