I componenti React sono bit di codice indipendenti e riutilizzabili. Un componente React riceve un input opzionale e restituisce un elemento React che viene visualizzato sullo schermo.

Esistono due tipi principali di componenti React:

1. I componenti funzionali sono senza stato.
2. I componenti della classe sono con stato.

Un componente funzionale è solo una semplice funzione javascript che prende gli oggetti di scena come argomento e restituisce un elemento di reazione. I componenti funzionali non richiedono dati da altri componenti e non interagiscono con altri componenti .

Cosa possono fare i componenti funzionali:

1. Accetta e usa gli oggetti di scena
2. Visualizza i dati in qualche forma (restituisce un elemento di reazione)

1. Usothis.state
2. Utilizzare i metodi del ciclo di vita (ad es componentDidmount. ).
3. Usa il metodo di rendering

import React from "react"

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

export default Welcome

Questi componenti vengono creati utilizzando la sintassi di classe di ES6. Hanno alcune funzionalità aggiuntive come la capacità di contenere la logica (ad esempio metodi che gestiscono eventi onClick), lo stato locale (ulteriori informazioni su questo nel prossimo capitolo) e altre capacità da esplorare nelle sezioni successive del libro.

Cosa possono fare i componenti di classe:

1. Utilizza la classe ES6 ed estendi la Componentclasse in React
2. Usothis.state
3. Utilizzare i metodi del ciclo di vita (ad es componentDidmount. ).
4. Usa il metodo di rendering
5. Accetta gli oggetti di scena del pass e accedi ad essi conthis.props

import React, {Component} from "react"

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

Utilizzare sempre un componente funzionale a meno che non sia necessario:

1. Gestisci lo stato
2. Aggiungi metodi del ciclo di vita al componente
3. Aggiungi la logica per i gestori di eventi

Componenti di presentazione

Il componente di presentazione è spesso chiamato componente funzionale stateless che accetta oggetti di scena e rende l'interfaccia utente. Come un componente funzionale, un componente di presentazione non può:

1. Usothis.state
2. Utilizzare i metodi del ciclo di vita (ad es componentDidmount. ).
3. Usa il metodo di rendering

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

I componenti del contenitore si occuperanno della parte comportamentale. Un componente contenitore dice al componente di presentazione cosa dovrebbe essere reso usando gli oggetti di scena. Non dovrebbe contenere markup e stili DOM limitati. Se utilizzi Redux, un componente contenitore contiene il codice che invia un'azione a un negozio. In alternativa, questo è il luogo in cui dovresti effettuare le tue chiamate API e archiviare il risultato nello stato del componente.

Ecco una definizione concisa del modello del componente del contenitore:

• I componenti del contenitore si occupano principalmente di come funzionano le cose
• Raramente hanno un proprio markup HTML, a parte un wrapping<div>
• Sono spesso stateful
• Sono responsabili della fornitura di dati e comportamenti ai propri figli (di solito componenti di presentazione).

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

I componenti puri vengono utilizzati principalmente per fornire ottimizzazioni. Sono i componenti più semplici e veloci che possiamo scrivere. Non dipendono né modificano lo stato delle variabili al di fuori del suo ambito. Quindi, perché i componenti puri possono sostituire i componenti funzionali semplici.

Ma una delle principali differenze tra un normale React.Componente un a React.PureComponentè che i componenti puri eseguono confronti superficiali sul cambiamento di stato. I componenti puri si prendono cura shouldComponentUpdate()da soli. Se il precedente statee/o propssono uguali al successivo, il componente non viene riprodotto.

React.PureComponentviene utilizzato per ottimizzare le prestazioni e non vi è alcun motivo per cui dovresti considerare di utilizzarlo a meno che non si verifichi una sorta di problema di prestazioni.

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