在 React/Redux 应用程序中，我应该何时显式传递一个 prop，而不是使用 mapStateToProps 从

In React/Redux app, when should I pass down a prop explicitly versus picking it up from global state using mapStateToProps?

本文关键字：prop 一个 mapStateToProps 应用程序 Redux React 我应该 何时显      更新时间：2023-09-26

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

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

使用一种或另一种方式意味着什么，我什么时候应该更喜欢一种而不是另一种？

关于如何拾取道具，是否有任何既定的最佳实践？每次我在某个深度嵌套的组件中使用mapStateToProps时，我都感觉有点糟糕，因为感觉组件与特定页面/应用程序的状态耦合。

没有一个好的答案。 根据 Redux 常见问题解答 在 http://redux.js.org/docs/FAQ.html#react-multiple-components ，由您决定在组件层次结构中的哪个位置连接组件是有意义的。 它可以在"LeftSidebar/RightMainPanel"级别，也可以更精细。 在某些情况下，例如尝试优化列表的性能，您可能会连接列表本身并检索项目 ID，并且每个 ListItem 本身都会连接并按 ID 检索自己的数据。

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

您是否已经了解了演示器/容器组件模式？围绕此模式存在多篇好文章，这些文章可以让您在大多数情况下很好地了解何时拥有演示器或容器组件

我的建议：

从组件层次结构顶部的一个容器组件（具有 mapStateToProps 和 mapDispatchToProps）开始。下面坚持只接收道具和动作的演示者组件。有时您会注意到 （A） 一个表示器组件本身需要大量属性/操作，或者 （B） 您向下传递了太多级别的属性/操作，并且只有其中一些被介于两者之间的组件抓取。

然后，您开始将演示者与胖组件 （A） 的容器组件交换。当传递的动作/属性仍然太多（B）时，需要考虑更多的容器组件，这些组件可以避免传递太深的道具/动作。

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

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

除了使用道具，我们还可以使用mixin。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 组件中，我们可以使用选择标头方法和变量

这个话题有点主观，没有硬性规定。所以我就告诉你我做什么。

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

我总是努力实现商店 --> 容器 --> 道具 -->组件的层次结构。

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

我绝对理解您在说什么，将组件连接到隐藏在组件层次结构中的存储可能会感觉有点脏，更不用说难以维护了。

这是一篇关于智能/哑组件或容器/组件的好文章：React 中的智能和哑组件

相关文章：