Reaguj na useContext za pomocą „setState”

Question

Niedawno zacząłem używać Context React Api z hookiem useContext. Zauważyłem, że gdy mamy zmienną stanu, tj. Const someState = useState (state, setState), niektórzy programiści przekazują setSate bezpośrednio w wartościach dostawcy, a następnie wywołują go w komponentach podrzędnych. Czy to dobra praktyka?

Kiedy nie używasz kontekstu, musisz utworzyć procedurę obsługi, aby "uzyskać dostęp" do setState w komponencie potomnym. Nadal używam funkcji obsługi i przekazuję je do wartości dostawcy, aby zaimportować je z kontekstu w dzieciach.

Czy przekazanie setState w kontekście to dobra praktyka? Nadal mam pewne wątpliwości, ponieważ normalnie nie można przekazać setState bezpośrednio do komponentu. Czy jest jakaś różnica w wydajności lub inne wady, które powinienem wziąć pod uwagę?

Dziękuję Ci.

Answer 1

Jeśli dobrze zrozumiałem, różnica polega na tym, że w jeden sposób stan jest ustawiany z komponentu nadrzędnego, aw drugim stan jest ustawiany z komponentu podrzędnego. Czasami ludzie robią to w ten sposób, aby uniknąć renderowania w pętli ze zmianą stanu. Nie powinno być żadnych wad, ale normalnym sposobem jest używanie funkcji obsługi.

Answer 2

Edycja: Właściwie myślę, że źle cię zrozumiałem, ale nie jestem pewien. Moja odpowiedź jest ważna w przypadku, gdy napiszesz własnego dostawcę, który ma stan. Jeśli korzystasz tylko z domyślnego dostawcy, który zapewnia setera, zgodziłbym się z odpowiedzią Amel.

---

Osobiście bym tego nie zrobił, ale to raczej opcja. Jednak, jak zawsze, zależy to w dużej mierze od tego, jaki cel chcesz osiągnąć.

Pozytywnym aspektem jest to, że setery stanu podane przez useState zawsze pozostają takie same dla każdego wyrenderowania. Jeśli przekazujesz wartość niestandardową, należy unikać zbyt częstych zmian, ponieważ każdy składnik nasłuchujący zmiany za pomocą useContext byłby ponownie wyrenderowany.

Nadal wolałbym przekazać niestandardowy obiekt (np. Pochodzący z useMemo, aby uniknąć niepotrzebnych ponownego renderowania) z wywołaniem zwrotnym, aby ustawić stan. Łatwiej jest przedłużyć, jeśli w przyszłości chcesz udostępnić więcej rzeczy.

Coś takiego (bardzo uproszczony przykład, który oczywiście nie ma sensu, to tylko dla zrozumienia):

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>;
}

Byłoby łatwiejsze rozszerzenie bez zmiany kodu wszędzie tam, gdzie używany jest kontekst. Jednak nadal uważam, że nie ma nic szczególnie złego w omijaniu samego rozgrywającego, jeśli to jest to, co chcesz osiągnąć.