Dans React, le currying est une technologie de haut niveau sur les fonctions. Il fait référence au formulaire d'encodage de fonction qui reçoit plusieurs paramètres et les traite finalement de manière uniforme en continuant à renvoyer des fonctions. Le currying n'appelle pas la fonction, mais simplement en convertissant les fonctions. obtenez facilement des données de contrôle de formulaire lors du traitement de formulaires via le curry.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version React 17.0.1, ordinateur Dell G3.
Curry de fonctions :
En continuant à renvoyer des fonctions via des appels de fonction, une forme de codage de fonction qui accepte les paramètres plusieurs fois et les traite finalement de manière uniforme est réalisée.
Prolongements :
Fonction d'ordre supérieur : si une fonction répond à l'une des deux spécifications suivantes, la fonction est une fonction d'ordre supérieur
1. Si le paramètre qu'une fonction accepte est une fonction, alors a peut être appelée une fonction d'ordre supérieur
2. Si la valeur de retour de la fonction a est toujours une fonction, alors a peut être appelée une fonction d'ordre supérieur.
3. Les fonctions courantes d'ordre supérieur incluent : promise, setTimeout, arr.map, etc.
Les exemples sont les suivants :
Dans le formulaire, utilisez des composants contrôlés pour lier les données d'état afin d'afficher les données du formulaire au clic :
importer React, {Component} depuis 'react';exporter la classe par défaut Form extend Component{ state = { userName: '', password: '' } submitForm = (event) => { event.preventDefault() //Empêcher la soumission du formulaire const {nom d'utilisateur, mot de passe } = this.state; alert(`${userName}, ${password}`) } updateUserName = (event) => { this.setState({ userName : event.target.value, }) } updatePassword = (événement) => { this.setState({ mot de passe : event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> Nom d'utilisateur :<input type="text" name = "userName" onChange={this.updateUserName}/> Mot de passe : <input type="password" name="password" onChange={this.updatePassword}/> <button>Connexion</button> </form> ) } }On peut voir que cette méthode est plus lourde lorsqu'il y a de nombreux éléments de formulaire, et le currying de fonctions peut être utilisé pour optimiser :
importer React, {Component} depuis 'react';exporter la classe par défaut Form extend Component{ state = { userName: '', password: '' } submitForm = (event) => { event.preventDefault() //Empêcher la soumission du formulaire const {userName, password } = this.state; alert(`${userName}, ${password}`) } updateFormData = (key) => { return (event) => { this.setState({ [key] : event .target.value, }) } } render() { return ( <form onSubmit={this.submitForm}> Nom d'utilisateur :<input type="text" name="userName" onChange={this.updateFormData('userName' ) }/> Mot de passe : <input type="password" name="password" onChange={this.updateFormData('password')}/> <button>Connexion</button> </form> ) }}La valeur de retour de this.updateFormData() est une fonction de rappel, liée à l'événement onChange, et le paramètre est event. De cette façon, le type peut être transmis lorsque le premier appel est effectué et la valeur peut être transmise lorsque l'événement de changement est déclenché.
Implémentation sans curry de fonction
La liaison directe de l'événement onChange en tant que rappel vous permet de transmettre simultanément les paramètres de type et de valeur.
importer React, {Component} depuis 'react';exporter la classe par défaut Form extend Component{ state = { userName: '', password: '' } submitForm = (event) => { event.preventDefault() //Empêcher la soumission du formulaire const {nom d'utilisateur, mot de passe } = this.state; alert(`${userName}, ${password}`) } updateFormData = (clé, événement) => { this.setState({ [clé] : event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> Nom d'utilisateur :<input type="text" name="userName" onChange={(event) => this.updateFormData('userName', event )}/> Mot de passe : <input type="password" name="password" onChange={(event) => this.updateFormData('password', event)}/> <button>Connexion</button> </ form > ) }}