Redux @connectデコレーターの '@'（アットマーク）は何ですか？

私はReactでReduxを学んでいて、このコードに出くわしました。Redux固有かどうかはわかりませんが、いずれかの例で次のコードスニペットを確認しました。

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

の機能connectはかなり単純ですが、@以前はわかりませんconnect。私が間違っていなければ、それはJavaScriptオペレーターでさえありません。

誰かがこれは何で、なぜそれが使用されているのか説明してもらえますか？

更新：

実際react-reduxには、ReactコンポーネントをReduxストアに接続するために使用されます。

@記号は、実際にはJavaScript式で、現在意味するために提案されているデコレータ：

デコレータを使用すると、設計時にクラスやプロパティに注釈を付けたり変更したりできます。

デコレータを使用しない場合と使用する場合のReduxの設定例を以下に示します。

デコレーターなし

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

デコレーターの使用

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
}

上記の例はどちらも同等ですが、それは好みの問題です。また、デコレータ構文はまだJavaScriptランタイムに組み込まれておらず、まだ実験段階であり、変更される可能性があります。利用したい場合はBabelで利用できます。

非常に重要です！

これらの小道具は状態小道具と呼ばれ、通常の小道具とは異なります。コンポーネントの小道具を変更すると、これらの小道具を使用しない場合でもコンポーネントのレンダリングメソッドが何度もトリガーされるため、パフォーマンス上の理由からコンポーネントのみにバインドしようとしますコンポーネント内で必要な状態の小道具、およびサブ小道具を使用する場合は、これらの小道具のみをバインドします。

例：コンポーネント内で必要なプロップは2つだけです：

1. 最後のメッセージ
2. ユーザー名

これをしないでください

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

これを行う

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