В React каррирование — это технология высокого уровня, связанная с функциями. Оно относится к форме кодирования функции, которая получает несколько параметров и, наконец, равномерно обрабатывает их, продолжая возвращать функции. Карринг не вызывает функцию, а просто преобразует функции. легко получать данные управления формой при обработке форм посредством каррирования.
Операционная среда этого руководства: система Windows 10, версия 17.0.1, компьютер Dell G3.
Каррирование функций:
Продолжая возвращать функции через вызовы функций, реализуется форма кодирования функций, которая принимает параметры несколько раз и, наконец, обрабатывает их единообразно.
Расширения:
Функция высшего порядка: если функция соответствует одной из следующих двух спецификаций, эта функция является функцией высшего порядка.
1. Если параметр, который принимает функция, является функцией, то a можно назвать функцией более высокого порядка.
2. Если возвращаемое значение функции a по-прежнему является функцией, то a можно назвать функцией более высокого порядка.
3. К общим функциям высшего порядка относятся: обещание, setTimeout, arr.map и т. д.
Примеры следующие:
В форме формы используйте управляемые компоненты для привязки данных о состоянии для отображения данных формы при нажатии:
импортировать React, {Component} из 'реагировать';экспортировать класс по умолчанию. Форма расширяет компонент {state = { userName: '', пароль: '' } submitForm = (event) => { event.preventDefault() // Предотвратить отправку формы const {userName, пароль } = this.state; alert(`${userName}, ${password}`) } updateUserName = (event) => { this.setState({ userName: event.target.value, }) } updatePassword = (событие) => { this.setState({пароль: event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> Имя пользователя:<input type="text" name = "userName" onChange={this.updateUserName}/> Пароль: <input type="password" name="password" onChange={this.updatePassword}/> <button>Войти</button> </form> ) } }Видно, что этот метод более громоздкий, когда элементов формы много, и для оптимизации можно использовать каррирование функций:
импортировать React, {Component} из 'реагировать';экспортировать класс по умолчанию. Форма расширяет компонент {state = { userName: '', пароль: '' } submitForm = (event) => { event.preventDefault() // Предотвратить отправку формы const {userName, пароль } = this.state; alert(`${userName}, ${password}`) } updateFormData = (ключ) => { return (event) => { this.setState({ [key]: event .target.value, }) } } render() { return ( <form onSubmit={this.submitForm}> Имя пользователя:<input type="text" name="userName" onChange={this.updateFormData('userName') }/> Пароль: <input type="password" name="password" onChange={this.updateFormData('password')}/> <button>Войти</button> </form> ) }}Возвращаемое значение this.updateFormData() — это функция обратного вызова, привязанная к событию onChange, а параметр — event. Таким образом, тип может быть передан при первом вызове, а значение может быть передано при возникновении события изменения.
Реализация без каррирования функций
Непосредственная привязка события onChange в качестве обратного вызова позволяет одновременно передавать параметры типа и значения.
импортировать React, {Component} из 'реагировать';экспортировать класс по умолчанию. Форма расширяет компонент {state = { userName: '', пароль: '' } submitForm = (event) => { event.preventDefault() // Предотвратить отправку формы const {userName, пароль } = this.state; alert(`${userName}, ${password}`) } updateFormData = (ключ, событие) => { this.setState({ [key]: event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> Имя пользователя:<input type="text" name="userName" onChange={(event) => this.updateFormData('userName', event )}/> Пароль: <input type="password" name="password" onChange={(event) => this.updateFormData('password', event)}/> <button>Войти</button> </ form > ) }}