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

Question

Ich lerne Redux mit React und stolperte über diesen Code. Ich bin mir nicht sicher ob es Redux ist oder nicht, aber ich habe das folgende Code-Snippet in einem der Beispiele gesehen.

@connect((state) => { 
    return { 
    key: state.a.b 
    }; 
}) 

Während die Funktionalität von connect ist ziemlich einfach, aber ich verstehe nicht, die @ vor connect. Es ist nicht einmal ein JavaScript-Operator, wenn ich nicht falsch liege.

Kann jemand bitte erklären was ist das und warum wird es benutzt?

Update:

Es ist in der Tat ein Teil von react-redux die verwendet wird, eine zu einem Redux Speicher Reagieren Komponente verbindet.

Answer 1

Das @ Symbol ist in der Tat ein JavaScript-Ausdruck currently proposed to signify decorators:

Zierer machen es möglich, Klassen und Eigenschaften zur Entwurfszeit mit Anmerkungen versehen und ändern.

Hier ist ein Beispiel von Redux Einrichtung 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); 

einen 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 Beispiele oben verwenden sind gleichwertig, es ist nur ein ma Präferenz. Außerdem ist die Decorator-Syntax noch nicht in Javascript-Laufzeiten eingebaut und ist immer noch experimentell und kann sich ändern. Wenn Sie es verwenden möchten, ist es verfügbar mit Babel.

Answer 2

Sehr wichtig!

Diese Requisiten Zustand Requisiten genannt werden, und sie unterscheiden sich von normalen Requisiten, eine Änderung Ihrer Komponente Zustand Requisiten löst der Komponentenmethode machen immer wieder, auch wenn Sie diese Requisiten nicht so für Performance-Gründen Versuchen Sie, nur die Statusrequisiten, die Sie in Ihrer Komponente benötigen, an Ihre Komponente zu binden, und binden Sie diese Requisiten nur dann, wenn Sie eine Unterrequisite verwenden.

Beispiel: können innerhalb Ihrer Komponente sagen, Sie brauchen nur zwei Requisiten:

1. die letzte Nachricht
2. der Benutzername

nicht tun, um diese

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

dies tun

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