Ich lerne Redux mit React und bin auf diesen Code gestoßen. Ich bin nicht sicher, ob es Redux- spezifisch ist oder nicht, aber ich habe das folgende Code-Snippet in einem der Beispiele gesehen.
@connect((state) => {
return {
key: state.a.b
};
})
Die Funktionalität von connect
ist zwar ziemlich einfach, aber ich verstehe das @
vorher nicht connect
. Es ist nicht einmal ein JavaScript-Operator, wenn ich mich nicht irre.
Kann jemand bitte erklären, was das ist und warum es verwendet wird?
Aktualisieren:
Tatsächlich wird ein Teil react-redux
davon verwendet, um eine React-Komponente mit einem Redux-Speicher zu verbinden.
javascript
reactjs
decorator
redux
Salman
quelle
quelle
Antworten:
Das
@
Symbol ist in der Tat ein JavaScript-Ausdruck, der derzeit vorgeschlagen wird, um Dekorateure zu kennzeichnen :Hier ist ein Beispiel für die Einrichtung von Redux ohne und mit einem Dekorateur:
Ohne Dekorateur
Mit einem Dekorateur
Beide obigen Beispiele sind gleichwertig, es ist nur eine Frage der Präferenz. Außerdem ist die Decorator-Syntax noch nicht in Javascript-Laufzeiten integriert und noch experimentell und kann sich ändern. Wenn Sie es verwenden möchten, ist es mit Babel verfügbar .
quelle
@connect(state => ({todos: state.todos}), dispatch => ({actions: bindActionCreators(actionCreators, dispatch)}))
Sehr wichtig!
Diese Requisiten werden als Status-Requisiten bezeichnet und unterscheiden sich von normalen Requisiten. Jede Änderung an Ihren Komponenten-Status-Requisiten löst die Komponenten-Rendermethode immer wieder aus, auch wenn Sie diese Requisiten nicht verwenden. Versuchen Sie daher aus Leistungsgründen, nur an Ihre Komponente zu binden Die Status-Requisiten, die Sie in Ihrer Komponente benötigen, und wenn Sie Unter-Requisiten verwenden, binden diese Requisiten nur.
Beispiel: Nehmen wir an, Sie benötigen in Ihrer Komponente nur zwei Requisiten:
Tu das nicht
mach das
quelle