Was ist das '@' (am Symbol) im Redux @ connect-Dekorator?

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 connectist 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-reduxdavon verwendet, um eine React-Komponente mit einem Redux-Speicher zu verbinden.

Das @Symbol ist in der Tat ein JavaScript-Ausdruck, der derzeit vorgeschlagen wird, um Dekorateure zu kennzeichnen :

Dekorateure ermöglichen das Kommentieren und Ändern von Klassen und Eigenschaften zur Entwurfszeit.

Hier ist ein Beispiel für die Einrichtung von Redux ohne und mit einem Dekorateur:

Ohne Dekorateur

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

class MyApp extends React.Component {
  // ...define your main app here
}

export default connect(mapStateToProps, mapDispatchToProps)(MyApp);

Mit einem Dekorateur

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
  // ...define your main app here
}

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 .

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:

1. die letzte Nachricht
2. der Nutzername

Tu das nicht

@connect(state => ({ 
   user: state.user,
   messages: state.messages
}))

mach das

@connect(state => ({ 
   user_name: state.user.name,
   last_message: state.messages[state.messages.length-1]
}))