javascript - react 最佳实践 : pass state down to child or have child check state directly?

Question

我正在使用 react/redux。我有一个包含两个组件的程序，称它们为 foo 和 bar。 Foo 需要设置一个状态，bar 将使用该状态来决定如何呈现。我有 foo 使用调度程序调度一个 Action ，reducer 正在使用该 Action 设置全局状态，到目前为止一切正常。

我的问题是谁应该加载它。让我的索引(呈现 foo 和 bar)检查状态然后将状态值作为 prop 传递给 bar 更好，还是让 bar 去掉中间人并直接检查状态更好。

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

Answer 1

使用 redux 和 react 时的主要建议之一是牢记Presentational 和 Container 组件 模式，在这种模式下，我们的展示组件不知道 redux 的存在并从中接收数据 Prop ，而容器组件是订阅 react 状态并将其传递给展示组件的组件:

这里有一个展示组件，如您所见，它与 React 无关。

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

为了拥有一个容器组件，我们将连接该组件并将其订阅到 React 的状态，例如:

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

您可以获得更多信息here