En reaccionar, los componentes se dividen en dos categorías: componentes de presentación y componentes de contenedor. Cada uno de estos tiene sus propias características. Veamos estos dos componentes en detalle. Componentes de presentación
- Preocupado principalmente por cómo se ven las cosas.
- No tener dependencias importantes en el resto de la aplicación.
- Sin conexión con la especificación de los datos que están fuera del componente.
- Principalmente recibe datos y devoluciones de llamadas exclusivamente a través de accesorios.
- Puede contener componentes de presentación y de contenedor en su interior teniendo en cuenta el hecho de que contiene marcado DOM y estilos propios.
Ejemplo: por ejemplo, el siguiente código denota un componente de presentación y obtiene sus datos de los accesorios y solo se enfoca en mostrar un elemento.
javascript
// presentational component
const Users = props =>
(<ul>
{props.users.map(user =>
(<li>{itr}</li> ))
}
</ul>)
Componentes del contenedor
- Preocupado principalmente por cómo funcionan las cosas.
- Puede contener componentes tanto de presentación como de contenedor, pero no tiene DOM ni marcado propios.
- Proporcione los datos y el comportamiento a los componentes de presentación u otros componentes del contenedor.
- Llame a las acciones de flujo y las proporcione como devoluciones de llamada al componente de presentación.
javascript
// container component
classUsersContainerextendsReact.Component{constructor()
{
this.state = {
itr: []
}
}
componentDidMount() {
axios.get('/users').then(itr=>this.setState({ users: itr}))
) }
render() {
return<Usersusers={this.state.itr} />
}}
Finalmente, como conclusión, podemos concluir en términos simples que los componentes de presentación se ocupan de la apariencia , los componentes de contenedor se ocupan de hacer que las cosas funcionen .