Uczę się Redux z React i natknąłem się na ten kod. Nie jestem pewien, czy jest on specyficzny dla Redux, czy nie, ale widziałem następujący fragment kodu w jednym z przykładów.
@connect((state) => {
return {
key: state.a.b
};
})
Chociaż funkcjonalność connect
jest dość prosta, ale nie rozumiem @
wcześniej connect
. To nie jest nawet operator JavaScript, jeśli się nie mylę.
Czy ktoś może wyjaśnić, co to jest i dlaczego jest używane?
Aktualizacja:
Jest to w rzeczywistości część, react-redux
która służy do połączenia komponentu React ze sklepem Redux.
javascript
reactjs
decorator
redux
Salman
źródło
źródło
Odpowiedzi:
Ten
@
symbol jest w rzeczywistości wyrażeniem JavaScript proponowanym obecnie dla oznaczenia dekoratorów :Oto przykład konfiguracji Redux bez i z dekoratorem:
Bez dekoratora
Korzystanie z dekoratora
Oba powyższe przykłady są równoważne, to tylko kwestia preferencji. Ponadto składnia dekoratora nie jest jeszcze wbudowana w żadne środowiska wykonawcze JavaScript i jest nadal eksperymentalna i może ulec zmianie. Jeśli chcesz go użyć, jest on dostępny przy użyciu Babel .
źródło
@connect(state => ({todos: state.todos}), dispatch => ({actions: bindActionCreators(actionCreators, dispatch)}))
Bardzo ważne!
Te rekwizyty są nazywane rekwizytami stanowymi i różnią się od zwykłych rekwizytów, każda zmiana rekwizytów stanu komponentu będzie wywoływać metodę renderowania komponentu raz po raz, nawet jeśli nie użyjesz tych rekwizytów, dlatego ze względów wydajnościowych spróbuj powiązać tylko komponent rekwizyty stanu, których potrzebujesz w swoim komponencie, a jeśli używasz rekwizytów podrzędnych, wiąż te rekwizyty.
przykład: powiedzmy, że w twoim komponencie potrzebujesz tylko dwóch rekwizytów:
nie rób tego
Zrób to
źródło