反应最佳实践：将状态传递给孩子还是让孩子直接检查状态？答案

【问题标题】：React best practicies: pass state down to child or have child check state directly?反应最佳实践：将状态传递给孩子还是让孩子直接检查状态？
【发布时间】：2018-06-12 14:23:47
【问题描述】：

我正在使用 react/redux。我有一个程序，它有两个组件，分别称为 foo 和 bar。 Foo 需要设置 bar 用来决定如何渲染的状态。我有 foo 使用调度程序来调度一个动作，而减速器正在使用该动作来设置全局状态，到目前为止一切都很好。

我的问题是谁应该加载它。是让我的索引（呈现 foo 和 bar）检查状态，然后将状态值作为道具传递给 bar，还是让 bar 切掉中间人并直接检查状态。

更准确地说，我想知道 react/redux 的开发人员是否支持一种特定的方法，或者这是其中一种设计决策，只要开发人员保持一致，这两种方法都是可行的？

【问题讨论】：

在层次结构中具有尽可能低的状态，这样元素就不会不必要地重新渲染（也就是如果只有 bar 需要它，就将它放在 bar 中）
最好添加一些示例代码，否则只有长文本看起来很无聊，人们不会对您的问题表现出兴趣。
简而言之；将父组件状态值操作到所有子组件道具是最好的方法。唯一的父母我的意思是容器应该有反应减少连接管道

标签： javascript reactjs redux

【解决方案1】：

使用 redux 和 react 的主要建议之一是牢记 Presentational 和 Container 组件 模式，在这种模式下，我们的表示组件不知道 redux 的存在并从props，而容器组件是订阅反应状态并将其传递给展示组件的组件：

这里你有一个展示组件，你可以看到它与反应无关。

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map((todo, index) => (
      <Todo key={index} {...todo} onClick={() => onTodoClick(index)} />
    ))}
  </ul>
)

为了有一个容器组件，我们会connect那个组件并订阅它的反应状态，比如：

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

您可以获取更多信息here

【讨论】：