React에서 커링은 함수에 대한 고급 기술로, 여러 개의 매개변수를 받아 최종적으로 함수를 계속해서 반환하여 균일하게 처리하는 함수 인코딩 형식을 말합니다. 커링을 통해 양식을 처리할 때 양식 제어 데이터를 쉽게 얻을 수 있습니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
함수 커링:
계속해서 함수 호출을 통해 함수를 반환함으로써 매개변수를 여러 번 받아들이고 최종적으로 이를 일률적으로 처리하는 함수 인코딩 형태를 구현한다.
확장:
고차 함수: 함수가 다음 두 사양 중 하나를 충족하면 해당 함수는 고차 함수입니다.
1. 함수가 받아들이는 매개변수가 함수라면, 함수는 고차 함수라고 불릴 수 있습니다.
2. 함수 a의 반환 값이 여전히 함수인 경우 a를 고차 함수라고 부를 수 있습니다.
3. 일반적인 고차 함수에는 promise, setTimeout, arr.map 등이 포함됩니다.
예는 다음과 같습니다.
양식 양식에서 제어되는 구성 요소를 사용하여 상태 데이터를 바인딩하여 클릭 시 양식 데이터를 표시합니다.
import React, {Component} from 'react';export default class Form 확장 Component{ state = { userName: '', 비밀번호: '' } submitForm = (event) => { event.preventDefault() //양식 제출 방지 const {userName, 비밀번호 } = this.state; 경고(`${userName}, ${password}`) } updateUserName = (이벤트) => { 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> ) } }양식 항목이 많을 때 이 방법이 더 번거롭다는 것을 알 수 있으며 함수 커링을 사용하여 최적화할 수 있습니다.
import React, {Component} from 'react';export default class Form 확장 Component{ state = { userName: '', 비밀번호: '' } submitForm = (event) => { event.preventDefault() //양식 제출 방지 const {userName, 비밀번호 } = this.state; 경고(`${userName}, ${password}`) } updateFormData = (key) => { return (event) => { this.setState({ [key]: 이벤트 .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 이벤트를 콜백으로 직접 바인딩하면 유형 및 값 매개변수를 동시에 전달할 수 있습니다.
import React, {Component} from 'react';export default class Form 확장 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', 이벤트 )}/> 비밀번호: <input type="password" name="password" onChange={(event) => this.updateFormData('password', event)}/> <button>로그인</button> </ form > ) }}