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

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 连接到状态。

父组件 A 将 prop x 直接传递给 child B，后者将相同的 prop x 传递给 child C。

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

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

Answer 1

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

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

但是为了给你一个高层次的概述；如果从 CompA -> CompB -> CompC -> CompD 向下“钻取” Prop 似乎很痛苦，请将数据存储在 redux 中。

如果数据只需要从 CompD -> CompE 走，你可以把它作为 props 传递下去。

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

最终，由您作为开发者做出这些决定，因为这个答案没有 Elixir 。