Ich vermisse wahrscheinlich etwas sehr Offensichtliches und möchte mich klären.
Hier ist mein Verständnis.
In einer naiven Reaktionskomponente haben wir states
& props
. Durch das Aktualisieren state
mit wird setState
die gesamte Komponente neu gerendert. props
sind meistens schreibgeschützt und eine Aktualisierung macht keinen Sinn.
In einer Reaktionskomponente, die einen Redux-Speicher abonniert store.subscribe(render)
, wird sie offensichtlich bei jeder Aktualisierung des Speichers neu gerendert.
React-Redux hat einen Helfer connect()
, der einen Teil des Statusbaums (der für die Komponente von Interesse ist) und actionCreators props
für die Komponente injiziert , normalerweise über so etwas
const TodoListComponent = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
Aber mit dem Verständnis, dass a setState
wichtig ist TodoListComponent
, um auf Änderungen des Redux-Statusbaums (erneutes Rendern) zu reagieren, kann ich keinen state
oder setState
verwandten Code in der TodoList
Komponentendatei finden. Es liest sich ungefähr so:
const TodoList = ({ todos, onTodoClick }) => (
<ul>
{todos.map(todo =>
<Todo
key={todo.id}
{...todo}
onClick={() => onTodoClick(todo.id)}
/>
)}
</ul>
)
Kann mich jemand in die richtige Richtung weisen, was mir fehlt?
PS Ich folge dem mit dem Redux-Paket gelieferten ToDo-Listenbeispiel .
quelle
prev.a === current.a && prev.b === current.b && .....
. Dies setzt voraus, dass Datenänderungen zu neuen Referenzen führen, was bedeutet, dass unveränderliche Datenaktualisierungen anstelle einer direkten Mutation erforderlich sind.Meine Antwort ist etwas außerhalb des linken Feldes. Es beleuchtet ein Problem, das mich zu diesem Beitrag geführt hat. In meinem Fall schien die App nicht neu gerendert zu werden, obwohl sie neue Requisiten erhielt.
React-Entwickler hatten eine Antwort auf diese häufig gestellte Frage, die besagt, dass 99% der Zeit, in der React nicht erneut gerendert wird, wenn der (Store) mutiert ist. Noch nichts über die anderen 1%. Mutation war hier nicht der Fall.
TLDR;
Edge - Fall: Sobald
state
Updates, dann die App nicht wieder machen!Es stellt sich heraus, dass Ihre App, wenn sie nur
state
zum Anzeigen ihrer Elemente verwendet wird,props
aktualisiert werden kann, aberstate
nicht, sodass kein erneutes Rendern erforderlich ist.Ich hatte
state
das abhängigprops
von Redux erhaltenstore
. Die Daten, die ich brauchte, waren noch nicht im Laden, also habe ich siecomponentDidMount
wie üblich abgerufen . Ich habe die Requisiten zurückbekommen, als mein Reduzierer den Speicher aktualisiert hat, da meine Komponente über mapStateToProps verbunden ist. Die Seite wurde jedoch nicht gerendert, und der Status war immer noch voller leerer Zeichenfolgen.Ein Beispiel hierfür ist, dass ein Benutzer eine Seite "Beitrag bearbeiten" aus einer gespeicherten URL geladen hat. Sie haben über die
postId
URL Zugriff auf die , aber die Informationen sind nochstore
nicht vorhanden, sodass Sie sie abrufen. Die Elemente auf Ihrer Seite sind gesteuerte Komponenten. Alle angezeigten Daten befinden sich also instate
.Mit Redux wurden die Daten abgerufen, der Speicher wurde aktualisiert und die Komponente wurde
connect
bearbeitet, aber die App spiegelte die Änderungen nicht wider. Bei näherer Betrachtungprops
wurden empfangen, aber App nicht aktualisiert.state
nicht aktualisiert.Nun,
props
wird aktualisiert und verbreitet, aberstate
nicht. Sie müssen speziell angebenstate
, um zu aktualisieren.Sie können dies nicht tun
render()
undcomponentDidMount
haben die Zyklen bereits beendet.componentWillReceiveProps
Hier aktualisieren Siestate
Eigenschaften, die von einem geändertenprop
Wert abhängen .Anwendungsbeispiel:
Ich muss diesem Artikel einen Gruß aussprechen, der mich über die Lösung aufgeklärt hat, die Dutzende anderer Posts, Blogs und Repos nicht erwähnt haben. Alle anderen, die Schwierigkeiten hatten, eine Antwort auf dieses offensichtlich dunkle Problem zu finden, hier ist es:
ReactJs Komponentenlebenszyklusmethoden - Ein tiefer Tauchgang
quelle
React 16.3
ab, Sie sollten die VerwendunggetDerivedStateFromProps
stattcomponentWillReceiveProps
. Aber in der Tat sollten Sie nicht einmal das alles tun, wie hierDiese Antwort ist eine Zusammenfassung von Brian Vaughns Artikel mit dem Titel " Sie brauchen wahrscheinlich keinen abgeleiteten Zustand" (07. Juni 2018).
Das Ableiten des Zustands von Requisiten ist ein Anti-Muster in all seinen Formen. Einschließlich der Verwendung der älteren
componentWillReceiveProps
und der neuerengetDerivedStateFromProps
.Betrachten Sie die folgenden Lösungen, anstatt den Status von Requisiten abzuleiten.
Zwei Best-Practice-Empfehlungen
Empfehlung 1. Voll gesteuerte Komponente Empfehlung 2. Vollständig unkontrollierte Komponente mit einem SchlüsselZwei Alternativen, wenn die Empfehlungen aus irgendeinem Grund für Ihre Situation nicht funktionieren.
Alternative 1: Setzen Sie die unkontrollierte Komponente mit einer ID-Stütze zurück Alternative 2: Setzen Sie die unkontrollierte Komponente mit einer Instanzmethode zurückquelle
Da ich nur weiß, was Redux tut, ruft bei Änderung des Geschäftsstatus componentWillRecieveProps auf, wenn Ihre Komponente vom mutierten Status abhängig war, und dann sollten Sie Ihre Komponente zwingen, ihren Status so zu aktualisieren
1-Store-Statusänderung-2-Aufruf (componentWillRecieveProps (() => {3-Komponenten-Statusänderung}))
quelle