React-Komponenten sind unabhängige und wiederverwendbare Code-Bits. Eine React-Komponente nimmt eine optionale Eingabe entgegen und gibt ein React-Element zurück , das auf dem Bildschirm gerendert wird.

Es gibt zwei Haupttypen von React-Komponenten:

1. Funktionale Komponenten sind zustandslos.
2. Klassenkomponenten sind zustandsbehaftet.

Eine funktionale Komponente ist nur eine einfache Javascript-Funktion, die Requisiten als Argument akzeptiert und ein React-Element zurückgibt. Funktionale Komponenten benötigen keine Daten von anderen Komponenten und interagieren nicht mit anderen Komponenten .

Was Funktionskomponenten können:

1. Akzeptiere und verwende Requisiten
2. Daten in irgendeiner Form anzeigen (ein Reaktionselement zurückgeben)

1. Verwendenthis.state
2. Verwenden Sie Lebenszyklusmethoden (z . B. componentDidmount).
3. Render-Methode verwenden

import React from "react"

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

export default Welcome

Diese Komponenten werden mithilfe der Klassensyntax von ES6 erstellt. Sie haben einige zusätzliche Eigenschaften, wie die Fähigkeit, Logik zu enthalten (zum Beispiel Methoden, die onClick-Ereignisse handhaben), lokalen Status (mehr dazu im nächsten Kapitel) und andere Fähigkeiten, die in späteren Abschnitten des Buchs untersucht werden.

Was Klassenkomponenten können:

1. Nutzen Sie die ES6-Klasse und erweitern Sie die ComponentKlasse in React
2. Verwendenthis.state
3. Verwenden Sie Lebenszyklusmethoden (z . B. componentDidmount).
4. Render-Methode verwenden
5. Akzeptieren Sie Pass-Requisiten und greifen Sie mit darauf zuthis.props

import React, {Component} from "react"

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

Verwenden Sie immer eine funktionale Komponente, es sei denn, Sie müssen:

1. Status verwalten
2. Fügen Sie der Komponente Lebenszyklusmethoden hinzu
3. Fügen Sie Logik für Ereignishandler hinzu

Präsentationskomponenten

Die Präsentationskomponente wird oft als zustandslose funktionale Komponente bezeichnet, die Requisiten nimmt und die Benutzeroberfläche rendert. Genau wie eine funktionale Komponente kann eine Präsentationskomponente nicht:

1. Verwendenthis.state
2. Verwenden Sie Lebenszyklusmethoden (z . B. componentDidmount).
3. Render-Methode verwenden

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

Containerkomponenten werden sich mit dem Verhaltensteil befassen. Eine Containerkomponente teilt der Präsentationskomponente mit, was mithilfe von Requisiten gerendert werden soll. Es sollte keine eingeschränkten DOM-Markups und -Stile enthalten. Wenn Sie Redux verwenden, enthält eine Containerkomponente den Code, der eine Aktion an einen Store weiterleitet. Alternativ ist dies der Ort, an dem Sie Ihre API-Aufrufe platzieren und das Ergebnis im Status der Komponente speichern sollten.

Hier ist eine kurze Definition des Containerkomponentenmusters:

• Containerkomponenten befassen sich in erster Linie damit, wie Dinge funktionieren
• Abgesehen von einem Wrapping haben sie selten ein eigenes HTML-Markup<div>
• Sie sind oft zustandsbehaftet
• Sie sind dafür verantwortlich, ihren Kindern Daten und Verhaltensweisen zur Verfügung zu stellen (normalerweise Präsentationskomponenten).

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

Reine Komponenten werden hauptsächlich verwendet, um Optimierungen bereitzustellen. Sie sind die einfachsten und schnellsten Komponenten, die wir schreiben können. Sie hängen nicht vom Status von Variablen außerhalb ihres Geltungsbereichs ab oder ändern sie. Daher können reine Komponenten einfache Funktionskomponenten ersetzen.

Ein wesentlicher Unterschied zwischen einem regulären React.Componentund einem a React.PureComponentbesteht jedoch darin, dass reine Komponenten flache Vergleiche bei Zustandsänderungen durchführen. Reine Komponenten erledigen sich shouldComponentUpdate()von selbst. Wenn das vorherige stateund/oder propsmit dem nächsten identisch ist, wird die Komponente nicht erneut gerendert.

React.PureComponentwird zur Optimierung der Leistung verwendet, und es gibt keinen Grund, warum Sie es in Betracht ziehen sollten, es sei denn, Sie haben ein Leistungsproblem.

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