useContext mit „setState“ reagieren

Question

Ich habe vor kurzem begonnen, die Context React Api mit useContext Hook zu verwenden. Ich habe beobachtet, dass, wenn wir eine Zustandsvariable haben, dh const someState = useState(state, setState), einige Entwickler setSate direkt in den Provider-Werten übergeben und es dann in untergeordneten Komponenten aufrufen. Ist das eine gute Praxis?

Wenn Sie keinen Kontext verwenden, müssen Sie einen Handler für den "Zugriff" auf setState in einer untergeordneten Komponente erstellen. Ich verwende immer noch Handlerfunktionen und übergebe sie an die Anbieterwerte, um sie aus dem Kontext in untergeordnete Elemente zu importieren.

Ist das Übergeben von setState im Kontext eine gute Praxis? Ich habe immer noch einige Zweifel, da Sie setState normalerweise nicht direkt an eine Komponente übergeben können. Gibt es einen Unterschied in der Leistung oder andere Nachteile, die ich berücksichtigen sollte?

Danke.

Answer 1

Wenn ich das richtig verstanden habe, besteht der Unterschied darin, dass der Status einerseits von der übergeordneten Komponente und andererseits der Status von der untergeordneten Komponente festgelegt wird. Manchmal machen Leute es so, um das Rendern von Schleifen mit dem Ändern des Zustands zu vermeiden. Es sollte keine Nachteile geben, aber die Verwendung von Handler-Funktionen ist der übliche Weg.

Answer 2

Edit: Ich glaube eigentlich, dass ich dich falsch verstanden habe, aber ich bin mir nicht sicher. Meine Antwort gilt für den Fall, wenn Sie einen eigenen Anbieter schreiben, der einen Status hat. Wenn Sie nur einen Standardanbieter verwenden, der einen Setter bereitstellt, würde ich der Antwort von Amel zustimmen.

---

Ich persönlich würde es nicht machen, aber das ist eher eine Option. Allerdings kommt es wie immer darauf an, welches Ziel man erreichen möchte.

Ein positiver Aspekt dabei ist, dass die von useState angegebenen Zustandssetzer bei jedem erneuten Rendern immer gleich bleiben. Wenn Sie einen benutzerdefinierten Wert übergeben, sollten Sie vermeiden, dass er sich zu oft ändert, da jede Komponente, die auf die Änderung mit useContext achtet, neu rendern würde.

Ich würde es immer noch vorziehen, ein benutzerdefiniertes Objekt (z. B. aus einem useMemo stammend, um unnötige Neuberechnungen zu vermeiden) mit einem Callback zu übergeben, um den Status festzulegen. Es ist einfacher zu erweitern, wenn Sie in Zukunft mehr Material bereitstellen möchten.

So etwas (sehr vereinfachtes Beispiel, das so natürlich keinen Sinn ergibt, nur zum Verständnis):

function MyProvider({children}) {
   const [state, setState] = useState(0);
   const provided = useMemo(() => ({
       value: state,
       setValue: (value) => setState(value)
   }, [value]);
   return <MyContext.Provider value={provided}>{children}</MyContext.Provider>;
}

Es wäre einfacher zu erweitern, ohne den Code überall dort zu ändern, wo der Kontext verwendet wird. Ich denke jedoch immer noch, dass es nicht besonders schlimm ist, nur den Setter zu passieren, wenn Sie das erreichen möchten.