React技术疑问：子组件用Props传递还是从Redux获取数据更优？

核心区别 #

1. 耦合程度不同 #

• 父传子：<Child prop1={this.props.prop1}>这种方式下，Child完全不依赖Redux，它只关心传入的prop1值，不管这个值是来自Redux、父组件的state还是其他地方。后续如果prop1的数据源变更，Child不需要做任何修改。
• 子组件自己用mapStateToProps：Child直接和Redux的状态结构绑定，耦合度高。如果Redux里prop1的存储路径变了（比如从state.prop1改成state.moduleA.prop1），Child的mapStateToProps必须同步修改。

2. 重渲染触发逻辑不同 #

• 父传子：只有Parent的props变化（包括prop1）时，Parent才会重渲染，进而把新的prop1传给Child触发Child重渲染。但如果Parent因为其他props变化重渲染，哪怕prop1没改，Child也会跟着重渲染（可以用React.memo/PureComponent优化）。
• 子组件自己取数：Redux中prop1变化时，只有Child会被触发重渲染，Parent不会受影响——除非Parent自己的其他依赖状态也变了。

3. 数据流清晰度不同 #

• 父传子：数据从Parent流向Child，看Child的调用代码就能直接知道prop1的来源，调试和维护时更容易追踪数据链路。
• 子组件自己取数：数据直接从Redux到Child，跳过了Parent，数据流不直观。在大型项目里，可能要花时间找Child依赖的Redux状态位置。

4. 组件复用性不同 #

• 父传子：Child是独立的通用组件，只要传入符合要求的prop1，就能在任何场景使用——哪怕是不接入Redux的页面。
• 子组件自己取数：Child只能在有Redux环境的项目/页面中使用，复用性受限。如果要在非Redux场景用，还得额外改代码支持props传入。

哪种方式更合适？ #

• 如果Child是通用基础组件（比如自定义按钮、列表项、表单输入框这类），优先用父传子的方式，保证组件的独立性和复用性。
• 如果Child是业务绑定的专用组件，且只在Redux环境下使用，同时希望避免Parent不必要的重渲染，或者Parent本身不需要prop1只是做中转，那让Child自己通过mapStateToProps取数更合适。
• 要是用的是函数组件+Redux Toolkit的useSelector，两种方式的实现成本都很低，但依然要优先考虑耦合度和复用性的问题。

内容的提问来源于stack exchange，提问作者gkeenley