Reaccionar: componentes de presentación frente a contenedores

La diferencia entre los componentes de presentación y de contenedor en React

En React, los componentes a menudo se dividen en 2 grandes grupos:componentes de presentaciónycomponentes del contenedor.

Cada uno de ellos tiene sus características únicas.

Los componentes de presentación se preocupan principalmente por generar algunas marcas para su salida.

No gestionan ningún tipo de estado, excepto el relacionado con la presentación.

Los componentes del contenedor se ocupan principalmente de las operaciones "backend".

Pueden manejar el estado de varios subcomponentes. Pueden incluir varios componentes de presentación. Pueden interactuar conRedux.

Como una forma de simplificar la distinción, podemos decirLos componentes de presentación están relacionados con la apariencia.,Los componentes del contenedor se preocupan por hacer que las cosas funcionen..

Por ejemplo, este es un componente de presentación. Obtiene datos de sus accesorios y solo se enfoca en mostrar un elemento:

const Users = props => (
  <ul>
    {props.users.map(user => (
      <li>{user}</li>
    ))}
  </ul>
)

Por otro lado, este es un componente contenedor. Gestiona y almacena sus propios datos y utiliza el componente de presentación para mostrarlos.

class UsersContainer extends React.Component {
  constructor() {
    this.state = {
      users: []
    }
  }

componentDidMount() {
axios.get(’/users’).then(users =>
this.setState({ users: users }))
)
}


render() {
return <Users users={this.state.users} />
}
}

Descarga mi gratisReact Handbook


Más tutoriales de react:


Tech Wiki en línea!