Redux @connect dekoratördeki '@' (sembolde) nedir?

React ile Redux öğreniyorum ve bu kod üzerine tökezledi. Redux'a özgü olup olmadığından emin değilim, ancak örneklerden birinde aşağıdaki kod snippet'ini gördüm.

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

İşlevselliği connectoldukça basit olsa da , daha @önce anlamıyorum connect. Yanılmıyorsam bile bir JavaScript operatörü değil.

Birisi lütfen bunun ne olduğunu ve neden kullanıldığını açıklayabilir mi?

Güncelleme:

Aslında bir kısmı react-reduxbir React bileşenini bir Redux mağazasına bağlamak için kullanılır.

@Sembol aslında bir JavaScript ifadesidir anda delalet önerdi dekoratörler :

Dekoratörler, tasarım zamanında sınıflara ve özelliklere açıklama eklemeyi ve değiştirmeyi mümkün kılar.

İşte Redux'u dekoratör olmadan ve dekoratörle kurmanın bir örneği:

Dekoratör olmadan

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

Dekoratör kullanma

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
}

Yukarıdaki her iki örnek de eşdeğerdir, sadece bir tercih meselesidir. Ayrıca, dekoratör sözdizimi henüz herhangi bir Javascript çalışma zamanına dahil değildir ve hala deneysel ve değişime tabidir. Kullanmak istiyorsanız, Babel'i kullanabilirsiniz .

Çok önemli!

Bu sahne durum durum sahne olarak adlandırılır ve normal sahne farklıdır, bileşen durum sahne değişiklikleri herhangi bir değişiklik bu sahne kullanmasanız bile bileşen işleme yöntemini tekrar tekrar tetikler, bu nedenle Performans Nedenleri için yalnızca bileşeninize bağlanmaya çalışın bileşeninizin içinde ihtiyaç duyduğunuz durum sahne donanımı ve bir alt sahne kullanıyorsanız yalnızca bu sahne bileşenlerini bağlayın.

örnek: diyelim ki bileşeninizin içinde sadece iki sahne gerekir:

1. son mesaj
2. Kullanıcı adı

bunu yapma

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

Bunu yap

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