javascript - without - redux ownprops




Quel est le "@"(au symbole) dans le décorateur Redux @connect? (2)

J'apprends Redux avec React et suis tombé sur ce code. Je ne sais pas si c'est spécifique à Redux ou non, mais j'ai vu l'extrait de code suivant dans l'un des exemples.

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

Alors que la fonctionnalité de connect est assez simple, mais je ne comprends pas le @ avant connect . Ce n'est même pas un opérateur JavaScript si je ne me trompe pas.

Quelqu'un peut-il expliquer s'il vous plaît qu'est-ce que c'est et pourquoi est-il utilisé?

Mettre à jour:

C'est en fait une partie de react-redux qui est utilisée pour connecter un composant React à un magasin Redux.


Le symbole @ est en fait une expression JavaScript actuellement proposée pour signifier les décorateurs :

Les décorateurs permettent d’annoter et de modifier des classes et des propriétés au moment de la conception.

Voici un exemple d'installation de Redux sans et avec un décorateur:

Sans décorateur

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

Utiliser un décorateur

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
}

Les deux exemples ci-dessus sont équivalents, c'est juste une question de préférence. De plus, la syntaxe de décorateur n'est pas encore intégrée dans les exécutions Javascript, elle est encore expérimentale et sujette à modification. Si vous souhaitez l’utiliser, il est disponible avec Babel .


Très important!

Ces accessoires s'appellent des accessoires d'état et ils sont différents des accessoires habituels. Toute modification de vos accessoires d'état de composant déclenchera la méthode de rendu des composants encore et encore, même si vous n'utilisez pas ces accessoires. Pour des raisons de performances, essayez de vous lier à votre composant uniquement. les accessoires d'état dont vous avez besoin à l'intérieur de votre composant et si vous utilisez un accessoire secondaire, ne liez que ces accessoires.

exemple: disons qu'à l'intérieur de votre composant, vous n'avez besoin que de deux accessoires:

  1. le dernier message
  2. l'identifiant

ne fais pas ça

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

fais ça

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






redux