Question

我是减少反应发展的初学者。我想知道什么是演示组件和容器组件。

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

Answer 1

如果将组件分为两类，您会发现组件更容易重复使用和推理。我称之为容器和演示组件。

我假设您了解redux架构

容器组件

意识到redux
订阅redux state
发送给redux行动
由react-redux生成
关注事物的运作方式

演示组件

不知道redux
从道具中读取数据
在道具上调用回调
由开发人员撰写
关注事物的外观

分类组件的好处

复用性
关注点分离

有关详细信息，请参阅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

这是我的理解方式：

演示组件

关注事物的外观

容器组件

涉及逻辑的组件

但是，经过进一步的研究，我意识到，如丹·阿布拉莫夫在这里所提到的，有时这种分离是不必要的： https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

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

话虽如此，如果您使用的是组件库，那么编码的大多数组件将是容器组件。当然，您可以创建自己的react UI组件库。

由于编程中没有什么硬性规定，因此react UI组件库可能与该组件紧密相关（例如，其行为方式，例如抽屉组件），并且仍被视为表示组件。

Redux演示组件与容器组件

3 个答案: