Pure functions and higher-order functions

One ： Pure function

1： A special class of functions : As long as it's the same input ( Actual parameters ), Must get the same output ( return )

// Parameters I entered a by 2, But in the function a Turn into 10, This function is not a pure function 
function demo(a){
    a=10
}

2： The following constraints must be observed

1： Do not overwrite parameter data

2： No side effects , For example, network request , Input and output devices .

3： Cannot call Date.now() perhaps Math.random() Wait for impure methods .

// Cannot call Date.now() perhaps Math.random() Wait for impure methods .
// One of these two generates a timestamp , A generated random number , This leads to the same input not getting the same output , It's not a pure function 
function demo(a){
    return Math.random()+a
}

3：redux Of reducer Function must be a pure function .

reducer The function of is to receive an old refstate ,action, Back to a new state, It is only responsible for state, So no side effects , That is, there can be no uncertainty , therefore redux Of reducer Function must be a pure function .

Two ： Higher order function

1： The function is coriolized

  <script type="text/babel">
    /*
     Higher order function ： If a function conforms to the following 2 Any one of the specifications , Then the function is a higher-order function .
                1： if A Is the function , The received parameter is a function , that A It can be called higher-order function 
                2： if A function , The return value of the call is still a function , Is it difficult A It can be called higher-order function .
                 Common higher-order functions are ：Promise,setTimeout,arr.map（） wait 

     The coriolisation of functions ： Methods that continue to return functions through function calls , Realize the function coding form of unified processing after multiple receiving parameters .
    */

    // Create components 
		class Login extends React.Component{

// Initialization status 
state = {
    username:'', // user name 
    password:'' // password 
}

// Save form data to state 
saveFormData=(dataType)=>{
    return (event)=>{
        this.setState({[dataType]:event.target.value})
    }
}

// Callback for form submission 
handleSubmit = (event)=>{
    event.preventDefault() // Block form submission 
    const {username,password} = this.state
    alert(` The user name you entered is ：${username}, The password you entered is ：${password}`)
}

render(){
    return(
        <form onSubmit={this.handleSubmit}>
             user name ：<input onChange={this.saveFormData('username')} type="text" name="username"/>
             password ：<input onChange={this.saveFormData('password')} type="password" name="password"/>
            <button> Sign in </button>
        </form>
    )
}
}
// Rendering Components 
ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>

2： Do not use function coritization

<script type="text/babel">
		// Create components 
		class Login extends React.Component{
			// Initialization status 
			state = {
				username:'', // user name 
				password:'' // password 
			}

			// Save form data to state 
			saveFormData = (dataType,event)=>{
				this.setState({[dataType]:event.target.value})
			}

			// Callback for form submission 
			handleSubmit = (event)=>{
				event.preventDefault() // Block form submission 
				const {username,password} = this.state
				alert(` The user name you entered is ：${username}, The password you entered is ：${password}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						 user name ：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
						 password ：<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/>
						<button> Sign in </button>
					</form>
				)
			}
		}
		// Rendering Components 
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>

3、 ... and ： ending

Follow the code step by step to understand , There must be gains .