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

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(&#39;userName&#39;)}/>
        密码: <input type="password" name="password" onChange={this.updateFormData(&#39;password&#39;)}/>
        <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(&#39;userName&#39;, event)}/>
        密码: <input type="password" name="password" onChange={(event) => this.updateFormData(&#39;password&#39;, event)}/>
        <button>登录</button>
      </form>
    )
  }
}

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がリアクションカリー化とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。