card2brain.ch

Flashcards	7
Students	11
Language	Deutsch
Category	Computer Science
Level	University
Created / Updated	13.11.2016 / 19.02.2019
Weblink	https://card2brain.ch/box/abend_17_21_09_2016_react_mit_testdriven_development
Embed	<iframe src="https://card2brain.ch/box/abend_17_21_09_2016_react_mit_testdriven_development/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>

React-Componenten verwenden die methoden createClass(), render() . Welche Aufgabe haben diese Methoden ?

Keyboard commands:

= turn,

= for-/backward,

= scroll

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 ?

Keyboard commands:

= turn,

= for-/backward,

= scroll

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: Wähle die korrekte Antwort

Bei React müssen HTML- und JavaScript-Code strikt getrennt werden

Bei React wird HTML- und JavaScript-Code üblicherweise kombiniert geschrieben

Keyboard commands:

= turn,

= for-/backward,

= scroll

Bei React müssen HTML- und JavaScript-Code strikt getrennt werden

Bei React wird HTML- und JavaScript-Code üblicherweise kombiniert geschrieben

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?

Keyboard commands:

= turn,

= for-/backward,

= scroll

shouldComponentUpdate(nextProps, nextState) {
if (...) { return true } return false; }
}

Was trifft bei JSX nicht zu?

Alle Elemente müssen nach dem XML Schema geschlossen werden Beispiel: <br> -> <br />

Ein JSX Ausdruck muss ein umschliessendes Element haben. (Keine mehrfachen Elemente auf der Root Ebene)

Javascript funktioniert nicht in JSX

Um auf ein Html-Tag das class Attribut setzten zu können muss className anstelle verwendet werden

Keyboard commands:

= turn,

= for-/backward,

= scroll

Alle Elemente müssen nach dem XML Schema geschlossen werden Beispiel: <br> -> <br />

Ein JSX Ausdruck muss ein umschliessendes Element haben. (Keine mehrfachen Elemente auf der Root Ebene)

Javascript funktioniert nicht in JSX

Um auf ein Html-Tag das class Attribut setzten zu können muss className anstelle verwendet werden

Was ist ein Virtual DOM

Keyboard commands:

= turn,

= for-/backward,

= scroll

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"?

Keyboard commands:

= turn,

= for-/backward,

= scroll

Die "stateful Component" kann einen (internen/isolierten) Datenspeicher bereithalten, welchen die simple Component nicht hat.

Daten werden üblicherweise über "props" (Attribut) übergeben.

Abend 17: 21.09.2016 - React mit Test-Driven Development

Create or copy sets of flashcards

Create or copy sets of flashcards

Log in to see all the cards.

SWITCHaai

Office 365

Edulog

Apple ID

Google