[S6L4] States, Nested Class Components

Question 1

Sind states von Components in React mutable?

Answer 1

-Ja, sie können created, geupdated und deleted werden

Question 2

Verändert man in React die states selber oder nutzt man die setState function?

Answer 2

• Man verändert nie den State direkt

- Man nutzt immer die setState Function um es zu beeinflussen

Question 3

Sind alle Components in React stateless, sofern kein state zugeordnet ist?

Answer 3

Ja, Components sind stateless solange sie keinen state haben

Question 4

Was wird jedes mal gecalled wenn das StateObject sich updated?

Answer 4

-Render wird gecallt und die Unterschiede auf der Website neu geladen

Question 5

Was ist SetState in React?

Answer 5

• Ein Mechanismus aus React der es erlaubt states zu verändern
• setState is async, also kann ungewollte Verhalten hervorrufen, da es ein eigenes Verhalten eingebaut hat welches nicht intuitiv ist
• setState returned immer ein Object das unser state Object repräsentiert
• ingoriert Wert die nicht explizit im state gesetzt sind
• setState triggered die render() function

Question 6

Wie sieht ein regulärer setSate in einer react App aus?

Answer 6

class App extends  React.Component {
  constructor() {
    super ();
    this. state = {
      message: "",
      clicked: false
      // creating state explicitly on the state object.
    };
  }

handleInputChange = event => {
this. setState({ message: event. target.value });
};

onClickMe = () => {
this. setState({ clicked: !this. state.clicked });
};

  render() {
    console.log("Rendered again!");
    return (
      div className="App"
        h1>{this. state.message}
        {/*// Reading component state */}
        input
          name="message"
          onChange={this. handleInputChange}
          placeholder="Change me"
          type="text"
          value={this. state.message}
        />
        {/*// updating component state */}
       button onClick={this. onClickMe}>Create State
      div>
    );
  }
}

Question 7

Wie geschieht ein update für einen setState in React?

Answer 7

handleInputChange = event => {
this. setState({ message: event. target.value });
};

Question 8

Wie sieht ein functional setSate in einer react App aus?

Answer 8

class App extends  React.Component {
  constructor() {
    super ();
    this. state = {
     count: 0, //this value will be updated
    };
  }

  increaseCount = event => {
    this. setState(prevState => {
 return { 
 count: prevState.count + 1, //Access to state only though this function
}
});
  };

onClickMe = () => {
this. setState({ clicked: !this. state.clicked });
};

  render() {
   h2>{this. state.ccount}/h2>
    return (
      div className="App"
       button onClick={this. increaseCount}>Create State
      div>
    );
  }
}

Question 9

Was ist der Unterschied zwischen regulären und funktionalen setState Aufrufen in React?

Answer 9

• Beim dem regulären Ansatz verhalten sich gewisse Dinge ungerwartet
• So ist es z.B. nicht möglich einfach einen counter mehrmals +1 zu setzen in einem Aufruf durch das hinterinander schreiben von setState counter +1
• Es werden alle Aufrufe wg. Performancegründen gebatched und dann nur der letzte ausgeführt

-Mit dem funktionalen Ansatz können durch die Nutzung von prevState Werte zwischengespeichert und während der Methode darauf bezogen werden.

Question 10

Was sieht ein Beispiel aus für einen funktionalen setState Ansatz bei welchem z,B. ein Counter mehrmals erhöht wird durch die Nutzung von prevState.

Answer 10

cliclToIncerease = () => {
    this. setState(prevState => {
 return { 
 count: prevState.count + 1, 
}, 
this. setState(prevState => {
 return { count: prevState.count + 1, }, 
this. setState(prevState => {
 return { count: prevState.count + 1, }
});
);
  };

Question 11

Warum sollte man Class Components nesten?

Answer 11

• Applications sind Trees aus Components
• States müssen als Props herumgereicht werden
• Oftmals brauchen Child Components ZUgriff auf den State
• Daten fließen in React von Parent zu Child, wenn das Parent State Object geupdated wird werden auch die porps die davon lesen geupdated

Question 12

Was ist der Unterschied zwischen Functional und Class Components?

Answer 12

-Der Constructor erhält Props als Argument

Question 13

Wie fließen Daten in einer React Application?

Answer 13

Parente Component besitzt State Data
->gibt Props weiter and Child Component
Child Component can State data halten
->gibt Props wieter an Grand Child Component
Grand Child Component reicht die Props an viele andere Components weiter

Question 14

Wie strukturiert man die Components für eine React App die verschiedene Städte auflisten soll?

Answer 14

APP Component

• hält Städte und State data
• passed Props an CitiesListComponent

CitiesList Component

• Hält verschiedene CitiyComponents in sich
• Gibt Props weiter an CitiyComponents
• CityComponent
• Hält verschiedene ZipComponents der Stadt
• Gibt Props an die ZipComponents wetier

Question 15

Was bringt es Functional Components zu nutzen`?

Answer 15

-Daten müssen nicht mehr so weit durch die Component Chain gereicht werden.