what is react currying

In React, currying is a high-level technology about functions. It refers to the function encoding form that receives multiple parameters and finally processes them uniformly by continuing to return functions. Currying The function is not called, but the function is converted. Through currying, the form control data can be easily obtained when processing the form.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is react currying

Currying of functions:

Continue to return functions through function calls to achieve multiple acceptance of parameters and final unified processing Function encoding form.

Extension:

Higher-order function: If a function meets one of the following two specifications, the function is a higher-order function

1. If the parameter accepted by function a is a function, then a can be called a higher-order function

2. If function a, the return value of the call is still a function, then a can be called a higher-order function

3. Common higher-order functions include: promise, setTimeout, arr.map, etc.

Examples are as follows;

In the form form, use controlled components to bind status data to display form data on click:

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>
    )
  }
}

You can see that this method is useful for The situation with many form items is more cumbersome, and you can use function currying to optimize:

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>
    )
  }
}

The return value of this.updateFormData() is a callback function, bound to the onChange event, and the parameter is event. In this way, the type can be passed when the first call is made, and the value can be passed when the change event is triggered.

Implementation without using function curry

Bind the onChange event directly as a callback, and you can pass two parameters, type and value, at the same time.

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>
    )
  }
}

[Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of what is react currying. For more information, please follow other related articles on the PHP Chinese website!