Redux 展示组件与容器组件

Question

我是使用 redux 进行 React 开发的初学者。我想知道什么是展示组件和容器组件。

如何将组件分类为演示组件或容器组件？
这两个有什么区别？
以这种方式对组件进行分类有什么好处？

Answer 1

如果将组件分为两类，您会发现组件更易于重用和推理。我称它们为容器和展示组件。

我假设您了解 redux 架构

容器组件

了解 redux
订阅 redux 状态
调度到 redux 操作
生成者react-redux
关注事物的运作方式

演示组件

不知道 redux
从 props 读取数据
调用 props 的回调
开发者编写
关注事物的外观

分类组件的好处

可重用性
关注点分离

有关详细信息，请阅读 this 文章

Answer 2

这里是差异的总结版本，以便于理解，尽管其中一些与上面的答案有关，

容器组件

关心事物的运作方式
负责通过属性向展示组件提供数据
还负责处理通过回调属性在演示组件内部触发的状态更改。这些状态更改通常通过调度操作来完成。

示例：

class TodoApp extends Component {
 componentDidMount() {
 this.props.actions.getTodos();
 }
 render() {
 const { todos, actions } = this.props;
 return (
 <div>
 <Header addTodo={actions.addTodo} />
 <MainSection todos={todos} actions={actions} />
 </div>
 );
 }
}
function mapState(state) {
 return {
 todos: state.todos
 };
}
function mapDispatch(dispatch) {
 return {
 actions: bindActionCreators(TodoActions, dispatch)
 };
}
export default connect(mapState, mapDispatch)(TodoApp);

演示文稿组件

关注事物的外观
用道具展示一切
根本不管理状态
不发出动作，但可以接受通过道具

示例：

<MyComponent
 title=“No state, just props.”
 barLabels={["MD", "VA", "DE", "DC"]}
 barValues={[13.626332, 47.989636, 9.596008, 28.788024]}
/>

Answer 3

我是这样理解的：

演示文稿组件

关注事物的外观

容器组件

涉及逻辑的组件

然而，经过进一步的研究，我意识到这种分离有时是不必要的，正如 Dan Abramov 在此处提到的那样： https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

您可以将表示组件理解为您在 React UI 组件库中找到的东西。它们使 UI 组件看起来很漂亮。然后，只需根据需要在容器组件中组合表示组件即可。

话虽如此，如果您使用的是组件库，那么您编写的大部分组件都是容器组件。当然你可以制作自己的 React UI 组件库。

由于编程中没有硬性规定，因此 React UI 组件库可能有一些与组件紧密耦合的逻辑（即它的行为方式，例如抽屉组件），并且仍然被视为展示组件。

Redux 展示组件与容器组件

Redux Presentational Components Vs Container Component

javascript

reactjs

redux

react-redux