react / react/react

Hibernating State (Not Necessarily Serialized)

Offen
#4,594 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

React Core Team Type: Big Picture
Vorherrschende Sprache
JavaScript
Sterne
251k
Forks
51.4k
Ø Merge
2 T. 4 Std.
Gemergte PRs (30 T.)
53

Beschreibung

Relay and others currently abuses some internals to get some persistent identity of a component. This effectively is used to restore the state of a component after it has been temporarily unmounted. It is also common to abuse Flux stores for this use case. Basically, since this capability doesn't currently exists, you're encouraged to use Flux for everything just in case you need this capability later on.

The purpose of this issue is to discuss a public API for hibernating the state of a component and then restoring it once the component remounts.

The use cases can be broken down into three scenarios:

  • List Item Out of View: E.g. Infinite scrolling (such as "table views") where one row eventually needs to be reclaimed to save the memory used by the tree that is out of view.
  • Detail View: In a master-detail view, clicking one item in the list switches the state of the detail view. When you click on the original view again.
  • Back/Forward Button: You want to save a snapshot of the state when you navigate. The new view can then change the state and when you hit the back button to return to a previous state, you want to restore the original state of the subtree.

We would like to support this at least in a non-serialized form. You could imagine having an API that serializes this to JSON or some other data structure too but that's a potential follow up and not necessarily part of this.

One potential API:

class View {
  state = { stateKeys: [{}, {}, {}] }
  render() {
    return <ChildView key={this.state.stateKeys[this.props.index]} />;
  }
}

Basically, an object is used as a key. Unlike the normal key semantics, the state of the subtree is kept in memory indefinitely. We use a WeakMap to keep the state. If the object ever goes away, the GC will collect the state of that subtree. This solves all three use cases.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der Überprüfung der vorgeschlagenen View API und der drei Anwendungsfälle: Listenelemente außerhalb der Ansicht, Detailansichten und Rückwärts-/Vorwärtsnavigation. In der Issue werden keine Dateien oder Tests genannt; diese Arbeit ist erst abgeschlossen, wenn eine festgelegte öffentliche API den Zustand von Komponenten bewahren und wiederherstellen kann, ohne eine Serialisierung zu erfordern.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
15/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.