[S7L3] React Composition Pattern

Question 1

Was ist eine High Order Component? (HOC)

Answer 1

• Ein viel genutztes fortgeschrittenes React Pattern
• Ist eine Component welche eine Component als Arguemnt akzeptiert
• Wird genutzt um Logik zwischen Component zu teilen
• Jede Component die von einer HOC gemounted wird ist ihre eigene stateful Component

Question 2

Welche bekannte High Order Function kenne man bereits?

Answer 2

Array.map(item => item +1);
Array.filter(item=> item > 24);
Array.reduce((prev, next) => {return prev !==next;});
-Akzeptiert eine Function als Callback

Question 3

Wie gibt man eine Component in eine Higher Order Component?

Answer 3

const HelloWorld = props => h1 onClicl={props.increment} {props.hello] {props.count] /h1
const Button = props = button className="btn" onClick={props.increment} > {props. hello} {props.count} /button 

const higherOrderComponent = WrappedComponent =>
class extends React.Component {
constructor() {
super();
this.state = {
hello: 'Higher Order Component',
counter. 0
}
addUpCounter = () => {
this.setState=(prevState, props) => {
counter: prevState.counter + 1 }
})
}
render() {
return < WrappedComponent count={this. state.counter} hello={this. state.hello} increment={this. addCounter]/>
}
}

const HOCHelloWorld = higherOrderComponent (helloWorld);
const HOCButton = higherOrderComponent(Button);

const App = () = {
return [ HOCHelloWorld key="1" />,  HOCButton key="2" />};

Question 4

Was ist State Driven Development?

Answer 4

.-Die Planung einer Software aus der Sicht ihrer verschiedenen Zustände

• Man kann die Interaktion mit dem DOM weg abstrahieren und kann mit dem virtual DOM/JSX interagieren
• Unsere Views (render) sind von den states abgeleitet auf die die Components Zugriff haben
• Unsere Views sind state/date driven!

Question 5

Welche Fragen sollte ein Front End Developer sich für neue Technologien stellen?

Answer 5

• Hat das Package die Möglichkeit Data/States zu halten?
• Wie groß ist die CommunitySupport des Packages?
• Nutzt das Package moderne Best Practices und Techniken wie Funktionale Programmierung?

Question 6

Warum ist ein Application State to wichtig im FrontEnd?

Answer 6

-State ist nicht nur ein Seiteneffekt, sondern ein grundlegendes Designprinzip mit welcher die App entwickelt werden sollte

Question 7

Was für Auswirkungen auf Software kann das Hinzufügen eines State-bedingten Popups haben?

Answer 7

• Software Architektur wurde beeinflusst

- Complexity wurde erhöht

Question 8

Welche Vorteile bringt State Driven Development?

Answer 8

• Reduzierte cognitive load, weil man die verschiedenen Zustände der App kennt und isoliert betrachten kann
• Testing wird vereinfacht
• Zustände sind leichter visuell zu dokumentieren