Abend 17: 21.09.2016 - React mit Test-Driven Development
CAS-FEE HSR Raperswil
CAS-FEE HSR Raperswil
-
- 1 / 7
-
Lernkarten
React-Componenten verwenden die methoden createClass(), render() . Welche Aufgabe haben diese Methoden ?
createClass():
Mit React.createClass() wird die React-Component erzeugt.
Code-Beispiel:
const MyComponent = React.createClass({ render: function() { return <div className={this.props.className}/>; } });
Mit ES6 kann auch die React-Component auch mit
class MyComponent extends React.Component { render() { return <div className={this.props.className}/>;
angelegt werden.
render():
render() erzeugt ein einzelnes Kind Element einer virtuellen Abbildung eines nativen Dom-Elements. Im realen DOM werden nur die Unterschiede zum virtuellen DOM aktualisiert. Dies ist die Ursache für die hohe Geschwindigkeit des Renderns von React.
Was ist JSX und deren Aufgabe ?
React bringt mit JSX eine JS-Spracherweiterung, um das Schreiben von HTML Elementen zu erleichtern. Damit lässt sich HTML-Code direkt in den JS Code schreiben
Beispiel:
const hi = <h1>Hi there</h1>:
React: Rendern unterbinden
Welche Methode musst du implementieren, damit du bei einer React-Komponente anhand Props oder States steuern kannst, ob
diese gerendert werden soll oder nicht?
shouldComponentUpdate(nextProps, nextState) {
if (...) { return true } return false; }
}
Was trifft bei JSX nicht zu?
Was ist ein Virtual DOM
Virtual DOM ist eine Abstraktion des realen DOM. Es beinhaltet alle benötigten Details um das DOM zu erstellen, aber weil es nicht all die vielen Informationen die ein DOM braucht, kann es schneller erstellt und geändert werden. Bei Änderungen wird die alte Version und die neue Version verglichen und so wird nur der Teil der geändert wurde neu hinzugefügt, anstatt das das ganze DOM erneut gerendert wird.
Was ist der Unterschied zwischen einer simplen "Component" und einer "stateful Component"?
Die "stateful Component" kann einen (internen/isolierten) Datenspeicher bereithalten, welchen die simple Component nicht hat.
Daten werden üblicherweise über "props" (Attribut) übergeben.
