React嵌套组件：用props传值还是直接调用useSelector？哪种更优？

方案1：组件A通过useSelector取数后，经props透传给组件C #

组件A中调用useSelector获取所需数据，通过props传递给组件B，再由B转发给组件C。

方案2：组件C直接调用useSelector获取数据 #

组件C跳过中间层，直接从Redux Store中获取自身需要的数据。

二者的核心区别 #

1. 组件耦合度与props透传问题 #

• 方案1会导致props drilling（属性透传）：组件B被迫接收并转发自己完全不需要的props，它的存在变成了数据传递的“中转站”，一旦C需要的数据结构变化，B的props定义也得跟着修改，增加了组件间的耦合。
• 方案2中，组件C只关注自身的数据需求，组件B无需关心C的数据源，各组件职责更单一，耦合度更低。

2. 组件复用性 #

• 方案1下，组件C的复用依赖上层组件（A/B）能提供对应props，如果要在其他场景复用C，必须保证新的上层组件也能传递相同的props，灵活性受限。
• 方案2中，组件C具备独立获取数据的能力，只要Redux Store中有对应数据，就能在任意场景下直接复用，复用性更强。

3. 性能表现 #

• 方案1：如果A中useSelector返回的数据范围过大（包含B、C不需要的内容），A会频繁重渲染，进而触发B、C的重渲染（除非用React.memo等优化手段）。但如果A只精准获取C需要的数据，性能差异不大。
• 方案2：useSelector可以精准选择C所需的切片数据，只有当该切片数据变化时，C才会重渲染，避免了上层组件不必要的渲染触发，性能更可控。注意要使用记忆化选择器（比如createSelector）避免因返回值引用变化导致的无意义重渲染。

4. 数据流可追踪性 #

• 方案1的数据流路径清晰：从A→B→C，调试时可以顺着props传递链条追踪数据的来源和变化过程。
• 方案2的数据流更直接：从Store→C，调试时需要查看C内部的useSelector逻辑，在大型应用中，如果多个组件直接从Store取数，数据流的整体追踪成本会略高。

选择建议 #

• 如果组件C是通用型组件（比如通用表格、弹窗组件），优先选方案2，让它独立获取数据，提升复用性。
• 如果组件C是A的专属子组件，且数据需要经过A的处理（比如过滤、转换），或者需要由A统一控制数据的加载时机，那么方案1更合适。

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