ホームページ > 記事 > ウェブフロントエンド > リアクションカリー化とは何ですか
React では、カリー化は関数に関する高度な技術であり、複数のパラメーターを受け取り、最終的には関数を返し続けることで均一に処理する関数のエンコード形式を指します。カリー化により、フォーム処理時にフォーム制御データを簡単に取得できます。
このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。
関数のカリー化:
関数呼び出しを通じて関数を返し続け、パラメーターの複数の受け入れと最終的な統一処理を実現する関数エンコード形式。
拡張:
高階関数: 関数が次の 2 つの仕様のいずれかを満たしている場合、その関数は高階関数です
1. 関数 a で受け取ったパラメータが関数の場合、a は高階関数として呼び出すことができます。
2. 関数 a の場合、呼び出しの戻り値は依然として関数です。 a は高階関数として呼び出すことができます。
3. 一般的な高階関数には、promise、setTimeout、arr.map などが含まれます。
例は次のとおりです。
フォーム フォームで、制御されたコンポーネントを使用してステータス データをバインドし、クリック時にフォーム データを表示します:
import React, {Component} from 'react'; export default class Form extends Component{ state = { userName: '', password: '' } submitForm = (event) => { event.preventDefault() //阻止表单提交 const {userName, password } = this.state; alert(`${userName}, ${password}`) } updateUserName = (event) => { this.setState({ userName: event.target.value, }) } updatePassword = (event) => { this.setState({ password: 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 extends Component{ state = { userName: '', password: '' } submitForm = (event) => { event.preventDefault() //阻止表单提交 const {userName, password } = this.state; alert(`${userName}, ${password}`) } updateFormData = (key) => { 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 イベントにバインドされたコールバック関数です。パラメータはイベントです。このようにして、最初の呼び出しが行われたときに型を渡すことができ、変更イベントがトリガーされたときに値を渡すことができます。
関数curryを使用しない実装
onChangeイベントをコールバックとして直接バインドすると、型と値の2つのパラメータを同時に渡すことができます。
import React, {Component} from 'react'; export default class Form extends Component{ state = { userName: '', password: '' } submitForm = (event) => { event.preventDefault() //阻止表单提交 const {userName, password } = this.state; alert(`${userName}, ${password}`) } updateFormData = (key, event) => { 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> ) } }
[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]
以上がリアクションカリー化とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。