Seite 3: Objektspezifikation, Events und Datenfluss

Inhaltsverzeichnis

Specs & Lifecycle in React-Komponenten

Komponenten lassen sich mit einer Objektspezifikation individuell gestalten. Neben den bereits im Artikel verwendeten Angaben wie render gibt es noch weitere, optionale Methoden:

• getInitialState: Die Rückgabe wird als anfänglicher State verwendet.
• getDefaultProps: Die Rückgabe wird dann verwendet, wenn die Elternkomponente keine props übergibt.
• mixins: ein Array von Objekten, um Funktionen auf mehreren Komponenten bereitzustellen.

Für den Komponenten-Lifecycle:

• componentWillMount: wird auf Client und Server vor dem Rendering einmalig aufgerufen.
• componentDidMount: wird nur auf dem Client nach dem Rendering einmalig aufgerufen. An dem Punkt besitzt die Komponente bereits die DOM-Repräsentation, auf die sich mit this.getDOMNode() zugreifen lässt.
• shouldComponentUpdate: Soll die Komponente aktualisiert werden? Wird vor dem Rendering aufgerufen, wenn sich props oder state ändert.
• componentWillUpdate: wird direkt vor dem Rendering aufgerufen.
• componentDidUpdate: wird direkt nach dem Rendering aufgerufen, um Operationen am DOM nach dem Update durchzuführen.
• componentWillUnmount: wird vor dem Unmounten der Komponente vom DOM aufgerufen; ist für das Aufräumen von DOM-Elementen zu verwenden, die in componentDidMount erstellt wurden.

Darüber hinaus gibt es noch weitere Methoden, zu denen sich detailliertere Informationen in der React-Component-Specs-Dokumentation finden lassen.

Events und Datenfluss

In React sind Event Handler als Instanzen von SyntheticEvent zu übergeben. Der Cross-Browser-Wrapper stellt sicher, dass die Events in allen Browsern identisch funktionieren. Dabei bleibt die Schnittstelle den nativen Events (beispielsweise stopPropagation() und preventDefault()) treu.

Die Events werden in den React-Komponenten den Elementen als Attribute hinzugefügt und lösen eine in der Objektspezifikation definierte Methode aus, sobald sie eintreten:

var DayComponent = React.createClass({
    getInitialState: function(){
        return {
            day: "Monday"
        }
    },
    setSunday: function() {
        this.setState({
            day: "Sunday"
        });
    },
    render: function(){
        return (
            <h1>{this.state.day}</h1>
            <button onClick={this.setSunday}>Set sunday</button>
        )
    }
});

Der Datenfluss ist einer der einfachsten und gleichzeitig interessantesten Teile von React. Während bei Frameworks wie AngularJS von einem Two-way Binding die Rede ist, fließen die Daten bei React nur in die Richtung vom sogenannten Owner zum Child, wie es im Von-Neumann-Modell beschrieben ist. Die Elternkomponente gibt den Status der ganzen untergeordneten Kette von Komponenten mit this.props weiter.

Sollen Daten in mehreren Komponenten zum Einsatz kommen, bindet man die Datenquelle häufig an eine zentrale Komponente und reicht sie den Unterelementen weiter.

var DayComponent = React.createClass({
  getInitialState: function(){
     return {
       initialItems: [
         "Monday",
         "Tuesday",
         "Wednesday",
         "Thursday",
         "Friday",
         "Saturday",
         "Sunday"
       ]
     }
  },
  componentWillMount: function(){
    this.setState({items: this.state.initialItems})
  },
  render: function(){
    return (
      <div>
        <DayList items={this.state.items}/>
      </div>
    );
  }
});
 
var DayList = React.createClass({
  render: function(){
    return (
      <ul>
      {
        this.props.items.map(function (item) {
          return <li>{item}</li>
        })
      }
      </ul>
    ) 
  }
});
 
React.renderComponent(<DayComponent/>, 
document.getElementById('example'));

Werden Formularfelder mit einem value-Attribut verwendet, ist von Controlled Components die Rede.

render: function() {
  return <input type="text" value="Hallo!" />;
}

Dabei hat der User keine Möglichkeit, den Wert durch Eingaben zu verändern, da React ihn gesetzt hat. Soll er modifiziert werden, ist am entsprechenden State anzusetzen:

getInitialState: function() {
    return {value: 'Hallo!'};
},
handleChange: function(event) {
    this.setState({value: event.target.value});
},
render: function() {
    var value = this.state.value;
    return <input type="text" value={value} onChange={this.handleChange} />;
}

Durch das onChange-Event wird der State aktualisiert und entspricht dann der Eingabe des Users. Das Vorgehen lässt sich mit dem Two-Way Binding Helper noch etwas vereinfachen.

Alternativ und ohne Angabe von value behandelt React die Felder als Uncontrolled Components. Die Angabe eines initialen Wertes ist aber nach wie vor mit defaultValue möglich:

render: function() {
  return <input type="text" defaultValue="Hello!" />;
}