Soy principiante en el desarrollo de reacción con redux. Me pregunto qué son los componentes de presentación y los componentes de contenedor.
Encontrará que sus componentes son mucho más fáciles de reutilizar y razonar si los divide en dos categorías. Los llamo componentes de contenedor y de presentación.
Supongo que tienes conocimiento sobre la arquitectura redux.
Componentes del contenedor
Componentes de presentación
Beneficios de categorizar componentes
Para más detalles lee este artículo
Aquí está la versión resumida de las diferencias para entender fácilmente, aunque algunas de ellas están relacionadas con la respuesta anterior,
Componentes del contenedor
Ejemplo :
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);
Componentes de presentación
Ejemplo:
<MyComponent title=“No state, just props.” barLabels={["MD", "VA", "DE", "DC"]} barValues={[13.626332, 47.989636, 9.596008, 28.788024]} />
Así es como lo entiendo:
Componentes de presentación
preocupación por cómo se ven las cosas
Componentes del contenedor
componentes con lógica involucrada
Sin embargo, tras investigar más, me di cuenta de que dicha separación a veces es innecesaria, como menciona Dan Abramov aquí: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
Puede entender el componente de presentación como algo que encuentra en la biblioteca de componentes de UI de reacción. Hacen que el componente de la interfaz de usuario se vea bonito. Luego, uno solo tiene que componer los componentes de presentación en el componente contenedor según sea necesario.
Habiendo dicho eso, si está utilizando una biblioteca de componentes, entonces la mayor parte del componente que codificó será un componente de contenedor. Por supuesto, puede crear su propia biblioteca de componentes de interfaz de usuario de reacción.
Como nada son reglas estrictas en la programación, la biblioteca de componentes de la interfaz de usuario de React puede tener alguna lógica estrechamente relacionada con el componente (es decir, cómo se comporta, como un componente de cajón) y aún así tratarse como un componente de presentación.