リアクションカリー化とは何ですか

Reactにおいてカリー化とは関数に関する高度な技術であり、複数のパラメータを受け取り、最終的には関数を呼び出し続けることでそれらを均一に処理する関数のエンコード形式を指します。カリー化を通じてフォームを処理する際に、フォーム制御データを簡単に取得できます。

このチュートリアルの動作環境: Windows 10 システム、React バージョン 17.0.1、Dell G3 コンピューター。

リアクションカリー化とは何ですか

関数のカリー化:

関数呼び出しで関数を返し続けることで、パラメータを複数回受け取って最終的に均一に処理する関数エンコード形式を実現します。

拡張機能:

高階関数: 関数が次の 2 つの仕様のいずれかを満たしている場合、その関数は高階関数です。

1. 関数が受け入れるパラメータが関数であれば、 を高階関数と呼ぶことができます。

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, パスワード } = 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> ) } }

フォーム項目が多数ある場合、この方法はより煩雑になることがわかり、関数カリー化を使用して最適化できます。

import React, {Component} from 'react';export default class Form extends Component{ state = { userName: '',password: '' } submitForm = (event) => {event.preventDefault() //フォームの送信を禁止します const {ユーザー名, パスワード } = this.state;alert(`${ユーザー名}, ${パスワード}`) } updateFormData = (キー) => { return (イベント) => { this.setState({ [キー]: イベント.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 extends Component{ state = { userName: '',password: '' } submitForm = (event) => {event.preventDefault() //フォームの送信を禁止します const {ユーザー名, パスワード } = this.state;alert(`${ユーザー名}, ${パスワード}`) } updateFormData = (キー, イベント) => { this.setState({ [キー]:event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> ユーザー名:<input type="text" name="userName" onChange={(event) => this.updateFormData('userName',even )}/> パスワード: <input type="password" name="password" onChange={(event) => this.updateFormData('password',event)}/> <button>ログイン</button> </ form > ) }}