将组件连接到 redux 全局状态与在 React-Native 中将 props 传递给子组件

Question

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

我的项目中的组件有两种接收 props 的方式：

1）将组件（子组件或父组件）连接到 redux 的全局状态。这允许我指定我的组件将接收全局状态的哪些部分，但当 prop 更改时将重新渲染。

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

2）以典型的 React-Native 方式将 props 传递给子组件。

<MapViewHome error={this.props.error} progress={this.props.progress} latitude={this.props.latitude} longitude={this.props.longitude} /> 

我之所以问这个问题是因为我有parent component A与国家有关的信息。

Parent component Ax直接将 prop 传递给，child B将相同的 prop 传递x给child C。

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

但是像这样将小型子组件连接到全局状态是一种好的做法吗？为什么不将每个组件连接到状态呢？

Answer 1

这是一个复杂的问题，redux/react 社区对此进行了大量讨论。

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

但为了给您一个高层次的概述；如果从 CompA -> CompB -> CompC -> CompD 中“钻取” props 看起来很痛苦，请将数据存储在 redux 中。

如果数据只需要从 CompD -> CompE 中获取，则可以将其作为 props 传递下去。

您也可以将需要共享的每个 prop 存储到 redux 中。只需要注意管理你的 redux 对象并尝试标准化和管理这个巨大的对象。

最终，这些决定取决于您作为开发人员，因为这个答案没有灵丹妙药。