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

• Consciente de redux
• Suscríbete al estado redux
• Envío a acciones redux
• Generado por react-redux
• Enfócate en cómo funcionan las cosas

Componentes de presentación

• Sin darse cuenta de redux
• Leer datos de accesorios
• Invocar devoluciones de llamada en accesorios
• Escrito por desarrollador
• Centrarse en cómo se ven las cosas

Beneficios de categorizar componentes

• Reutilización
• Separación de intereses

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

• Están preocupados por cómo funcionan las cosas.
• Responsable de proporcionar datos a los componentes de presentación a través de propiedades.
• También es responsable de manejar los cambios de estado activados dentro de un componente de presentación a través de las propiedades de devolución de llamada. Estos cambios de estado a menudo se realizan mediante el envío de una acción.

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

• Están preocupados por cómo se ven las cosas.
• Usa accesorios para mostrar todo
• No administrar el estado en absoluto
• No emita acciones, pero puede recibir devoluciones de llamada que lo hacen a través de accesorios.

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.