Wie Reagieren Die Abstimmung Funktioniert

0
39

Reagieren Sie schnell! Einige, die Geschwindigkeit kommt mit der Aktualisierung werden nur die Teile des DOM, die es brauchen. Weniger für Sie zu kümmern, und eine Geschwindigkeit zu gewinnen, um zu Booten. So lange, wie Sie verstehen, die Funktionsweise von setState(), Sie sollten gut zu gehen. Es ist jedoch auch wichtig, machen Sie sich vertraut mit, wie dieses erstaunliche Bibliothek aktualisiert das DOM der Anwendung. Mit diesem wissen wird maßgeblich sein, die in Ihrer Arbeit als Entwickler Reagieren.

Der DOM?

Der browser baut den DOM durch das Parsen der code, den Sie schreiben, er tut dies vor dem Rendern der Seite. Das DOM repräsentiert Dokumente, die in die Seite als Knoten und Objekte, die Bereitstellung einer Schnittstelle, so dass Programmiersprachen anschließen kann, und das DOM manipulieren. Das problem mit dem DOM ist, dass es nicht optimiert für dynamische UI-Anwendungen. So, die Aktualisierung der DOM verlangsamen kann Ihre Anwendung, wenn es gibt eine Menge Dinge geändert zu werden; wie der browser erneut anwenden, alle Stile und Rendern neue HTML-Elemente. Dies geschieht auch in Situationen, in denen sich nichts ändert.

Was ist Versöhnung?

Versöhnung ist der Prozess, durch den die Reagieren, aktualisiert die DOM. Wenn eine Komponente den Zustand ändert, Reagieren zu berechnen, wenn es notwendig ist, aktualisieren Sie die DOM. Es tut dies durch die Schaffung einer virtuellen DOM-und vergleichen Sie es mit dem aktuellen DOM. In diesem Kontext, virtual-DOM enthält den neuen Status der Komponente.

Wir bauen eine einfache Komponente, die addiert zwei zahlen. Die zahlen werden in ein Eingabefeld eingegeben.

Finden Sie den Stift Versöhnung Stift von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Erstens, wir müssen der Anfangszustand für die Felder, und aktualisieren Sie dann den Zustand, wenn eine Zahl eingegeben wird. Die Komponente wird wie folgt Aussehen:

Klasse App erweitert Reagieren.Komponente {

state = {
Ergebnis: “,
entry1: “,
entry2:”
}

handleEntry1 = (event) => {
diese.setState({entry1: event.Ziel.Wert})
}

handleEntry2 = (event) => {
diese.setState({entry2: event.Ziel.Wert})
}

handleAddition = (event) => {
const firstInt = parseInt(this.Zustand.entry1)
const secondInt = parseInt(this.Zustand.entry2)
diese.setState({Ergebnis: firstInt + secondInt })
}

render() {
const { entry1, entry2, Ergebnis } =.Zustand
return(
<div>
<div>
<p>Eintrag 1: { entry1 }</p>
<p>Eintrag 2: { entry2 }</p>
<p>Ergebnis: { Ergebnis }</p>
</div>
<br />
<div>
Eintrag 1:
<input type= “text” onChange={das.handleEntry1} />
</div>
<br />
<div>
Eintrag 2:
<input type= “text” onChange={das.handleEntry2} />
</div>
<div>
<button onClick={das.handleAddition} type=’submit’>Hinzufügen</button>
</div>
</div>
)
}
}

Auf ersten render, die DOM-Struktur wird wie folgt Aussehen;

Bei einer Eingabe in das erste Eingabefeld, zu Reagieren, schafft eine neue Struktur. Die neue Struktur, die der virtuellen DOM enthält der neue Staat für entry1. Dann Reagieren vergleicht die virtual-DOM mit der alten DOM-und aus dem Vergleich, Sie zahlen die Differenz zwischen den beiden DOMs und macht ein update nur der Teil, der anders ist. Ein neuer Baum wird jedes mal erstellt, wenn der Zustand des App-Komponente ändert — wenn ein Wert eingegeben wird, entweder in der ein-Feld, oder wenn die Schaltfläche geklickt wird.

Diff Verschiedenen Elemente

Wenn Sie den Zustand einer Komponente ändert, so dass ein element geändert werden muss von einem Typ zu einem anderen, zu Reagieren, hängt der ganze Baum und baut eine neue aus dem nichts. Dies bewirkt, dass jeder Knoten in diesem Baum zerstört.

Mal sehen, ein Beispiel:

Klasse App erweitert Reagieren.Komponente {

state = {
ändern: true
}

handleChange = (event) => {
diese.setState({Veränderung: !diese.Zustand.ändern})
}

render() {
const { ändern } =.Zustand
return(
<div>
<div>
<button onClick={das.handleChange}>Ändern</button>
</div>

{
ändern ?
<div>
Dies ist div Ursache, es ist wahr
<h2>Dies ist ein h2-element im div-Element</h2>
</div> :
<p>
Dies ist ein p-element, weil es falsch
<br />
Dies ist ein weiterer Absatz in den falschen Absatz
</p>
}
</div>
)
}
}

Auf der ersten Rendern, sehen Sie das div-Element und seinen Inhalt und auf die Schaltfläche klicken, Ursachen Reagieren zu zerstören, die div ‘ s Baum, der seine Inhalte und bauen Sie sich eine Struktur für das <p> – element statt. Dasselbe passiert, wenn wir die gleichen Komponenten in beiden Fällen. Die Komponente wird zerstört werden, neben den bisherigen Baum gehörte, und eine neue Instanz erstellt wird. Siehe demo unten;

Finden Sie den Stift Versöhnung-2-Stift von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Diff-Listen

Reagieren Schlüssel verwendet, um zu verfolgen die Elemente in einer Liste. Die Schlüssel helfen, es herauszufinden, die position des Elements in eine Liste ein. Was passiert, wenn eine Liste nicht haben lösen? Reagieren mutieren wird jedes Kind von der Liste, auch wenn es keine neuen änderungen.

In anderen Worten, Reagieren, ändert sich jedes Element in eine Liste, die keine keys haben.

Hier ein Beispiel:

const firstArr = [‘codepen’, ‘codesandbox’]
const secondArr = [‘github’, ‘codepen’, ‘bitbucket’, ‘codesanbox’]

Klasse App erweitert Reagieren.Komponente {

state = {
ändern: true
}

handleChange = (event) => {
diese.setState({Veränderung: !diese.Zustand.ändern})
}

render() {
const { ändern } =.Zustand
return(
<div>
<div>
<button onClick={das.handleChange}>Ändern</button>
</div>

<ul>
{
ändern ?
firstArr.Karte((e) => <li>{e}</li>)
:
secondArr.Karte((e) => <li>{e}</li>)
}
</ul>
</div>
)
}
}

Hier haben wir zwei arrays, die das Rendern je nach dem Zustand der Komponente. Reagieren keine Möglichkeit hat, zu behalten die Punkte auf der Liste, so ist es gebunden ist, zu ändern, die ganze Liste jedes mal, wenn es notwendig ist, neu zu Rendern. Dies führt zu performance-Problemen.

In der Konsole, sehen Sie eine Warnung wie diese:

Warnung: Jedes Kind in ein array oder iterator sollte ein eindeutiger “Schlüssel” prop.

Um dies zu beheben, fügen Sie einen eindeutigen Schlüssel für jedes Element in der Liste.

const firstArr = [‘codepen’, ‘codesandbox’]
const secondArr = [‘github’, ‘codepen’, ‘bitbucket’, ‘codesanbox’]

Klasse App erweitert Reagieren.Komponente {

state = {
ändern: true
}

handleChange = (event) => {
diese.setState({Veränderung: !diese.Zustand.ändern})
}

render() {
const { ändern } =.Zustand
return(
<div>
<div>
<button onClick={das.handleChange}>Ändern</button>
</div>

<ul>
{
ändern ?
firstArr.Karte((e, index) => <li key={e.index}>{e}</li>)
:
secondArr.Karte((e, index) => <li key={e.index}>{e}</li>)
}
</ul>
</div>
)
}
}

Finden Sie den Stift Versöhnung-3-Stift von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Zusammenfassung

Zusammenfassend, hier sind die beiden wichtigsten take-aways für das Verständnis, wie das Konzept der Versöhnung arbeitet in Reagieren:

  • Reagieren können Sie Ihre UI-schnell, aber er braucht Ihre Hilfe. Es ist gut zu verstehen, seine Versöhnung.
  • Reagieren nicht eine vollständige rerender Ihrer DOM-Knoten. Es ändert sich nur was es braucht. Der diff-Prozess ist so schnell, dass Sie möglicherweise nicht bemerken.