Apa '@' (pada simbol) di dekorator Redux @connect?

Saya belajar Redux dengan Bereaksi dan menemukan kode ini. Saya tidak yakin apakah itu Redux khusus atau tidak, tetapi saya telah melihat potongan kode berikut dalam salah satu contoh.

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

Sementara fungsionalitasnya connectcukup mudah, tapi saya tidak mengerti @sebelumnya connect. Bahkan bukan operator JavaScript jika saya tidak salah.

Dapatkah seseorang menjelaskan tolong apa ini dan mengapa ini digunakan?

Memperbarui:

Itu sebenarnya bagian react-reduxyang digunakan untuk menghubungkan komponen Bereaksi ke toko Redux.

The @simbol sebenarnya ekspresi JavaScript saat ini diusulkan untuk menandakan dekorator :

Dekorator memungkinkan untuk membuat anotasi dan memodifikasi kelas dan properti pada waktu desain.

Berikut adalah contoh pengaturan Redux tanpa dan dengan dekorator:

Tanpa dekorator

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

Menggunakan dekorator

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
}

Kedua contoh di atas setara, hanya masalah preferensi. Juga, sintaksis dekorator belum dibangun ke dalam runtime Javascript apa pun, dan masih bersifat eksperimental dan dapat berubah. Jika Anda ingin menggunakannya, itu tersedia menggunakan Babel .

Sangat penting!

Alat peraga ini disebut alat peraga keadaan dan mereka berbeda dari alat peraga normal, setiap perubahan pada alat peraga keadaan komponen Anda akan memicu metode render komponen berulang kali bahkan jika Anda tidak menggunakan alat peraga ini sehingga untuk Alasan Kinerja cobalah untuk mengikat hanya ke komponen Anda keadaan alat peraga yang Anda butuhkan di dalam komponen Anda dan jika Anda menggunakan sub alat peraga hanya mengikat alat peraga ini.

contoh: katakanlah di dalam komponen Anda, Anda hanya perlu dua alat peraga:

1. pesan terakhir
2. nama pengguna

jangan lakukan ini

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

melakukan hal ini

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