Feliz: Frage: Happy.ElmishComponents vs Happy.UseElmish

Also ist Feliz.ElmishComponents nicht mehr sehr nützlich und älter als Feliz.UseElmish . Der Grund dafür ist, dass Feliz.ElmishComponents ursprünglich eine klassenbasierte Komponente war, die ich als Funktionskomponente umgeschrieben habe. Kurz darauf haben wir festgestellt, dass es trivial ist, wenn es sich um eine Funktionskomponente handelt, sie einfach in einen Hook umzuwandeln. So entstand Feliz.UseElmish . Also ist Feliz.ElmishComponents jetzt wirklich nur eine Funktionskomponente, die den Hook aufruft. Wenn Sie sich das Projekt für Feliz.ElmishComponents ansehen, werden Sie feststellen, dass es jetzt winzig ist .

Vielen Dank, Cody!!! Wenn ich es richtig verstehe, ist Feliz.UseElmish im Moment die Standardeinstellung.

Ja, wir haben meistens noch Feliz.ElmishComponents um die Leute nicht zu brechen. Sie können es als veraltet betrachten.

Perfekt! Danke noch einmal!

Wenn es "veraltet" ist, könnte es eine gute Idee sein, es als "Veraltet" zu markieren und die Leute auf die empfohlene API umzuleiten.

Was denkst du?

Ja, wir diskutieren gerade mit Kollegen aus dem F#-Team, dass wir PR für die Dokumentation machen sollten (vielleicht mit Link zu diesem Problem).

Ok, ich habe es hier gemacht - https://github.com/Zaid-Ajaj/Feliz/pull/264

Gibt es typische Szenarien, in denen Sie sich für eines entscheiden würden? Ich liebe die einfache Bedienung von Feliz.UseElmish und befürchte nur, dass ich hier vielleicht etwas noch Cooleres vermisse. 😄

Hallo Roman, gute Frage!

Der Unterschied, den Cody erwähnt hat, besteht darin, dass Feliz.UseElmish mit Hooks geschrieben wird, im Gegensatz zu einer vollständigen Komponentenimplementierung von Feliz.ElmishComponents .

Das ist jedoch nicht die ganze Geschichte, denn Feliz.UseElmish folgt auch der _Hook-Semantik_, wenn es um die Neuinitialisierung von Komponenten geht, indem das Dependency-Array als letztes Argument verwendet wird, was ein großer Unterschied zu Feliz.ElmishComponents das tut das nicht, wo die Neuinitialisierung hackig war: einzigartige Komponentenschlüssel aus der Eingabe erstellen, yikes!

Feliz.UseElmish kann auch mit anderen Hooks wie Abonnements in derselben Komponente kombiniert werden.

Was meine ich mit "Neuinitialisierung"? Stellen Sie sich vor, Sie laden die Benutzerprofilkomponente basierend auf URL-Änderungen wie folgt:

#/user=profile/{userId} -> UserProfile { UserId = userId }

Im Grunde wollen wir die UserProfile Komponente neu initialisieren (aufrufen von init um den Zustand zurückzusetzen), wenn sich die Eingabe UserId ändert:

type UserProfileProps = { UserId : int }

let UserProfile = React.functionComponent("UserProfile", fun (props: UserProfileProps) -> 
  let state, dispatch = React.useElmish(init props.UserId, update, [| props.UserId |])
  Html.h1 (sprintf "UserProfile(UserId=%d)" props.UserId)
)

// later on application  entry: 

React.router [
  router.onUrlChange (parseUrl >> UrlChanged >> dispatch) 
  router.children [
     match state.CurrentUrl with
     | [ "user-profile"; Route.Int userId ] -> UserProfile { UserId = userId }
     | _ -> Html.h1 "Not found" 
  ]
]

Da wir das Abhängigkeitsarray [| props.UserId |] für den Hook bereitstellen (drittes Argument für den Hook), wird die Komponente automatisch aktualisiert und init erneut aufgerufen, um die Elmish-Dispatch-Schleife zurückzusetzen. Dies ist, was wir wollen, weil init eine Funktion der Eingabe props.UserId also möchten wir sie erneut aufrufen, wenn sich die Requisiten der Komponenten ändern.

Wenn weder die init noch die update Funktion zusätzliche Eingaben von den Props der Komponente erfordern, geben Sie einfach ein leeres Abhängigkeitsarray an:

let state, dispatch = React.useElmish(init, update, [| |])

Dies wird normalerweise für Komponenten verwendet, die keine Eingabe von außen benötigen, wie die Eingabekomponente der Anwendung.

Es kann etwas schwierig sein, sich an das Dependency-Array zu gewöhnen, aber sie sind sehr sinnvoll, lesen Sie mehr darüber in Bedingtes Auslösen eines Effekts aus den Hook-Dokumenten.

Abschließender Tipp: Feliz.UseElmish ist wirklich mächtig, weil es Ihnen eine vollwertige Elmish-Versandschleife bietet, wie Sie es von traditionellen Elmish-Apps gewohnt sind. Das Einrichten von Typen für den Zustand und die Nachrichten kann jedoch etwas zu aufwendig sein, wenn Ihre Komponenten einfach sind. Brauchen Sie ein paar Staatsflaggen? Dann könnten ein paar Zustandsvariablen mit React.useState ausreichen. Müssen Sie einige Daten ohne weitere Interaktion abrufen und rendern? Dann könnte React.useDeferred den Zweck erfüllen. Ich werde Feliz.UseElmish für komplizierte Seiten wählen, die viele Ereignisse und viel Interaktion haben.

Wow, typische Antwort von Zaid. 😄 Du solltest anfangen, diese Dinge zu unterrichten, Mann! Endlich kann ich es verstehen. Danke noch einmal! ️