Redux @connect 데코레이터의 '@'(기호)은 무엇입니까?

React로 Redux를 배우고 있으며이 코드를 우연히 발견했습니다. Redux 전용 인지 확실 하지 않지만 예제 중 하나에서 다음 코드 스 니펫을 보았습니다.

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

의 기능 connect은 매우 간단하지만 @이전을 이해하지 못합니다 connect. 내가 틀리지 않으면 JavaScript 연산자조차 아닙니다.

누군가 이것이 무엇이며 왜 사용되는지 설명해 줄 수 있습니까?

최신 정보:

실제로 react-reduxReact 구성 요소를 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 을 사용하십시오 .

매우 중요!

이 소품은 상태 소품이라고하며 일반 소품과 다릅니다. 구성 요소 상태 소품을 변경하면이 소품을 사용하지 않아도 성능 렌더링 을 위해 구성 요소에만 바인딩하려고 시도해 도 구성 요소 렌더링 방법이 반복적으로 트리거 됩니다 구성 요소 내부에 필요한 상태 소품과 하위 소품을 사용하는 경우 이러한 소품 만 바인딩합니다.

예 : 구성 요소 내부에 소품이 두 개만 있으면됩니다.

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]
}))