J'apprends Redux avec React et suis tombé sur ce code. Je ne sais pas s'il 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
};
})
Bien que la fonctionnalité de connect
soit assez simple, mais je ne comprends pas ce qui @
précède connect
. Ce n'est même pas un opérateur JavaScript si je ne me trompe pas.
Quelqu'un peut-il expliquer ce que c'est et pourquoi est-il utilisé?
Mettre à jour:
C'est en fait une partie de celle-ci react-redux
qui sert à connecter un composant React à un magasin Redux.
javascript
reactjs
decorator
redux
Salman
la source
la source
Réponses:
Le
@
symbole est en fait une expression JavaScript actuellement proposée pour désigner les décorateurs :Voici un exemple de configuration de Redux sans et avec un décorateur:
Sans décorateur
Utiliser un décorateur
Les deux exemples ci-dessus sont équivalents, c'est juste une question de préférence. De plus, la syntaxe du décorateur n'est pas encore intégrée dans les runtimes Javascript, et est toujours expérimentale et sujette à changement. Si vous souhaitez l'utiliser, il est disponible via Babel .
la source
@connect(state => ({todos: state.todos}), dispatch => ({actions: bindActionCreators(actionCreators, dispatch)}))
Très important!
Ces accessoires sont appelés accessoires d'état et ils sont différents des accessoires normaux, toute modification apportée aux accessoires d'état de votre composant déclenchera la méthode de rendu du composant encore et encore, même si vous n'utilisez pas ces accessoires.Par conséquent, 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:
ne fais pas ça
fais ça
la source