React-Redux mapStateToProps 与传递父道具答案

【问题标题】：React-Redux mapStateToProps vs passing down parent propsReact-Redux mapStateToProps 与传递父道具
【发布时间】：2018-02-03 01:26:46
【问题描述】：

这可能是一个幼稚的问题，但我是 react-redux 的新手，我正在学习。

上下文：鉴于我有一个 react-redux 应用程序。在我的顶级组件中，我在底部有这个：

function mapStateToProps({ auth }) {
  return { auth };
}

export default connect(mapStateToProps)(newComponent);

'auth' 部分来自我的 reducer index.js 文件：

import { combineReducers } from "redux";
import authReducer from "./authReducer";

export default combineReducers({
  auth: authReducer
});

所以现在这个组件可以访问 auth 附带的所有数据，这些数据在我的应用程序中包含所有需要的用户信息。

随着我的应用程序变得越来越大，我意识到我需要来自顶级组件 1 或 2 层的其他组件中来自 authReducer 的数据

我的问题是：将顶级组件与 auth reducer 连接并将必要的信息传递给子组件是否更好？如果一个 100 层以下的孩子需要来自 authReducer 的信息，我们还会一层一层地向下传递它吗？

或者我们是否像上面那样将 authReducer 连接到每个需要它的组件？重复做会很贵吗？

【问题讨论】：

听起来你的问题是关于我们是否可以直接连接嵌套的孩子并提供状态访问，或者我们是否需要将该孩子的每个祖先一直连接到根<Provider> ...

标签： javascript reactjs redux react-redux

【解决方案1】：

文档涉及有关此主题的最佳实践：link。相关部分：

当前建议的最佳做法是对组件进行分类作为“展示”或“容器”组件，并提取连接的任何有意义的容器组件：

在 Redux 示例中强调“顶部的一个容器组件”是一个错误。不要把这当作格言。尝试保留您的演示文稿组件分开。通过连接它们来创建容器组件方便的时候。每当您觉得自己在复制代码时在父组件中为同类型的孩子提供数据，时间提取容器。一般来说，只要你觉得父母知道太多关于其孩子的“个人”数据或行为，是时候提取一个容器。

事实上，基准测试表明，更多的连接组件通常会比更少的连接组件带来更好的性能。

一般来说，尝试在可理解的数据流和您的组件的责任范围。

【讨论】：