Les composants React sont des morceaux de code indépendants et réutilisables. Un composant React prend une entrée facultative et renvoie un élément React qui est rendu à l'écran.

Il existe deux principaux types de composants React :

1. Les composants fonctionnels sont sans état.
2. Les composants de classe sont avec état.

Un composant fonctionnel est juste une simple fonction javascript qui prend des accessoires comme argument et renvoie un élément de réaction. Les composants fonctionnels ne nécessitent pas de données provenant d'autres composants et n'interagissent avec aucun autre composant .

Ce que les composants fonctionnels PEUVENT faire :

1. Accepter et utiliser des accessoires
2. Afficher les données sous une certaine forme (retourner un élément de réaction)

1. Utilisationthis.state
2. Utilisez des méthodes de cycle de vie (par exemple componentDidmount).
3. Utiliser la méthode de rendu

import React from "react"

const Welcome = props => {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
    </div>
  )
}

export default Welcome

Ces composants sont créés à l'aide de la syntaxe de classe d'ES6. Ils ont quelques fonctionnalités supplémentaires telles que la capacité de contenir la logique (par exemple les méthodes qui gèrent les événements onClick), l'état local (plus à ce sujet dans le chapitre suivant) et d'autres fonctionnalités à explorer dans les sections ultérieures du livre.

Ce que les composants de classe PEUVENT faire :

1. Utilisez la classe ES6 et étendez la Componentclasse dans React
2. Utilisationthis.state
3. Utilisez des méthodes de cycle de vie (par exemple componentDidmount).
4. Utiliser la méthode de rendu
5. Acceptez les accessoires de passe et accédez-y avecthis.props

import React, {Component} from "react"

class Welcome extends Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
      </div>
    )
  }
}
export default Welcome

Utilisez toujours un composant fonctionnel, sauf si vous devez :

1. Gérer l'état
2. Ajouter des méthodes de cycle de vie au composant
3. Ajouter une logique pour les gestionnaires d'événements

Composants de présentation

Le composant de présentation est souvent appelé un composant fonctionnel sans état qui prend des accessoires et rend l'interface utilisateur. Comme un composant fonctionnel, un composant de présentation ne peut pas :

1. Utilisationthis.state
2. Utilisez des méthodes de cycle de vie (par exemple componentDidmount).
3. Utiliser la méthode de rendu

import React from 'react'

const Book = ({ title, img_url }) => (
  <div className="book">
    <img src={ img_url } alt={title}/>
    <h3>{ title }</h3>
  </div>
)

export default Book

Les composants du conteneur s'occuperont de la partie comportementale. Un composant de conteneur indique au composant de présentation ce qui doit être rendu à l'aide d'accessoires. Il ne doit pas contenir de balises et de styles DOM limités. Si vous utilisez Redux, un composant de conteneur contient le code qui envoie une action à un magasin. Alternativement, c'est l'endroit où vous devez placer vos appels d'API et stocker le résultat dans l'état du composant.

Voici une définition concise du modèle de composant de conteneur :

• Les composants de conteneur sont principalement concernés par la façon dont les choses fonctionnent
• Ils ont rarement leur propre balisage HTML, à part un habillage<div>
• Ils sont souvent pleins d'états
• Ils sont chargés de fournir des données et des comportements à leurs enfants (généralement des composants de présentation).

class BookList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      books: []
    };
  }

  componentDidMount() {
    fetch('https://learn-co-curriculum.github.io/books-json-example-api/books.json')
      .then(response => response.json())
      .then(bookData => this.setState({ books: bookData.books }))
  }

  renderBooks = () => {
    return this.state.books.map(book => {
      return (
        <div className="book">
          <img src={ book.img_url } />
          <h3>{ book.title }</h3>
        </div>
      )
    })
  }

  render() {
    return (
      <div className="book-list">
        { this.renderBooks() }
      </div>
    )
  }
}

PureComponent

Les composants purs sont principalement utilisés pour fournir des optimisations. Ce sont les composants les plus simples et les plus rapides que nous puissions écrire. Ils ne dépendent ni ne modifient l'état des variables en dehors de sa portée. D'où la raison pour laquelle des composants purs peuvent remplacer des composants fonctionnels simples.

Mais, une différence majeure entre un régulier React.Componentet un React.PureComponentest que les composants purs effectuent des comparaisons superficielles sur le changement d'état. Les composants purs s'occupent d' shouldComponentUpdate()eux-mêmes. Si le précédent stateet/ou propssont identiques au suivant, le composant n'est pas rendu à nouveau.

React.PureComponentest utilisé pour optimiser les performances, et il n'y a aucune raison pour que vous envisagiez de l'utiliser, sauf si vous rencontrez un problème de performances.

import React from ‘react
class Welcome extends React.PureComponent{
  render(){
    return (
      <div>
        <h1>Welcome!</h1>
      </div>
    )
  }
}
export default Welcome