Réagir: composants de présentation vs composants de conteneur

La différence entre les composants de présentation et de conteneur dans React

Dans React, les composants sont souvent divisés en 2 grands seaux:composants de présentationetcomposants de conteneur.

Chacun de ceux-ci a ses caractéristiques uniques.

Les composants de présentation sont principalement concernés par la génération d'un balisage à produire.

Ils ne gèrent aucun type d'état, à l'exception de l'état lié à la présentation

Les composants du conteneur sont principalement concernés par les opérations «backend».

Ils peuvent gérer l'état de divers sous-composants. Ils peuvent envelopper plusieurs composants de présentation. Ils pourraient s'interfacer avecRedux.

Pour simplifier la distinction, on peut direles composants de présentation sont concernés par l'apparence,les composants du conteneur sont soucieux de faire fonctionner les choses.

Par exemple, il s'agit d'un composant de présentation. Il obtient des données de ses accessoires et se concentre simplement sur l'affichage d'un élément:

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

D'autre part, il s'agit d'un composant de conteneur. Il gère et stocke ses propres données et utilise le composant de présentation pour les afficher.

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} /> } }

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: