Question

我无法理解何时应该将props传递给子组件，而不是将这些组件直接连接到状态。

项目中的组件可以通过两种方式获取道具：

1）将组件（子代或父代）连接到redux的全局状态。这使我可以指定我的组件将接收的全局状态的哪些部分，但是当prop更改时将重新呈现。

Operators                                       Precedence              Associativity
postfix increment and decrement                 ++ --                   left to right
prefix increment and decrement, and unary       ++ -- + - ~ !           right to left
multiplicative                                  * / %                   left to right
additive                                        + -                     left to right

2）以典型的React-Native方式将道具传递到子组件。

const mapStateToProps = state => ({
    error: state.error,
    progress: state.scan.progress,
    latitude: parseFloat(state.enrollment.latitude),
    longitude: parseFloat(state.enrollment.longitude),
});

export default connect(mapStateToProps)(MapViewHome);

我问这个的原因是因为我有<MapViewHome error={this.props.error} progress={this.props.progress} latitude={this.props.latitude} longitude={this.props.longitude} />与国家相连。

parent component A将属性Parent component A直接传递到x，后者将相同属性child B传递给x。

如果道具child C发生变化，这将导致组件A，B和C重新呈现。我可以通过将x直接连接到状态来避免重新渲染组件A和B，因此它是受道具更改影响的唯一组件。

但是，像这样将小的子组件连接到全局状态是否是一种好习惯？为什么不将每个组件都连接到状态呢？

Answer 1

这是一个很复杂的问题，redux / react社区讨论了很多问题。

您可能会发现大量的Medium文章和讨论此问题的React / Redux作者。

但是为了给您一个高层次的概述；如果从CompA-> CompB-> CompC-> CompD中“钻取”道具似乎很麻烦，请将数据存储在redux中。

如果仅需要从CompD-> CompE中获取数据，则可以将其作为道具传递下来。

您也可以将需要共享的每个道具存储到redux中。只是要注意管理您的redux对象，并尝试规范化和管理巨型对象。

最终，由您作为开发者来做出这些决定，因为此答案没有灵丹妙药。

Answer 2

使用无状态组件的主要优点是可重用性。以您的示例为例，可使用无状态版本的MapViewHome在屏幕上同时显示多幅经纬度不同的地图，因为您可以将不同的道具传递给每一个。有状态的MapViewHome只能显示一个，因为它依赖于全局状态。

因此，真正由您决定如何构造组件。我认为始终从无状态组件开始是个好主意，但是如果您的用例不需要可重用性，那么使用有状态组件就可以了。

Answer 3

通常，当您捕获表单数据或只是尝试隐藏和取消隐藏元素时，不需要使用商店。例如，当您在字段中键入数据时，您可能希望更改本地状态，然后使用该本地状态传递给要分派的thunk创建者。如果您可以提供有关您在此处要具体实现的目标的更多背景信息，我们将很乐意提供更多指导！

将组件连接到redux全局状态v.s将props向下传递到React-Native中的子组件

3 个答案: