【React】＜JavaScript框架＞事件处理&高阶函数&函数柯里化

2022-06-11 17:19:09

【React】＜JavaScript框架＞事件处理&高阶函数&函数柯里化

目录

一、事件处理：

二、收集表单数据：

1.受控组件：

2.非受控组件：

三、高阶函数&函数的柯里化：

1.函数柯里化：

柯里化概述：

柯里化的应用：

 2.不使用柯里化：

一、事件处理：

  • 通过onXxx属性指定事件处理函数(注意大小写)
    • React使用的是自定义(合成)事件, 而不是使用的原生DOM事件（为了更好的兼容性）
    • React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)（更高效）
  • 通过event.target得到发生事件的DOM元素对象（不过度依赖ref）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test"></div>
</body>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<script src="./js/prop-types.js"></script>
<script type="text/babel">

    //创建组件：
    class Demo extends React.Component{
        render(){
            return (
                <div>
                    <input onBlur={this.showData} ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                </div>
            )
        }

        //传入event，指定当前元素节点（搜控组件）
        showData = (event)=>{
            console.log(event.target)
            alert(event.target.value)
        }
    }

    //将组件渲染到页面：
    ReactDOM.render(<Demo/>,document.getElementById("test"))
</script>
</html>

【React】＜JavaScript框架＞事件处理&高阶函数&函数柯里化

二、收集表单数据：

包含表单的组件分类：

  • 受控组件
  • 非受控组件

1.受控组件：

将数据维护到state里，需要使用时，从state中获取数据！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_受控组件</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="./js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="./js/babel.min.js"></script>

<script type="text/babel">
    //创建组件
    class Login extends React.Component{

        //初始化状态
        state = {
            username:'', //用户名
            password:'' //密码
        }

        //保存用户名到状态中
        saveUsername = (event)=>{
            this.setState({username:event.target.value})
        }

        //保存密码到状态中
        savePassword = (event)=>{
            this.setState({password:event.target.value})
        }

        //表单提交的回调
        handleSubmit = (event)=>{
            event.preventDefault() //阻止表单提交
            const {username,password} = this.state
            alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
        }

        render(){
            return(
                <form onSubmit={this.handleSubmit}>
                    用户名：<input onChange={this.saveUsername} type="text" name="username"/>
                    密码：<input onChange={this.savePassword} type="password" name="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }
    //渲染组件
    ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>

2.非受控组件：

"现用现取"的组件！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test"></div>
</body>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<script src="./js/prop-types.js"></script>
<script type="text/babel">

    //创建组件：
    class Login extends React.Component{

        render(){
            return (
                <form action="#" onSubmit={this.handleSubmit}>
                    用户名：<input ref={c => {this.username = c}} type="text" name="username"/><br/>
                    密&nbsp;&nbsp;&nbsp;码：<input ref={c => {this.password = c}} type="text" name="password"/><br/>
                    <button>登录</button>
                </form>
            )
        }

        //回调函数：
        handleSubmit = (event)=>{
            event.preventDefault() //阻止触发控件默认效果
            const {username, password} = this
            alert(`用户名：${username.value}  密码：${password.value}`)
        }
    }

    //将组件渲染到页面：
    ReactDOM.render(<Login/>, document.getElementById("test"))

</script>
</html>

三、高阶函数&函数的柯里化：

【React】＜JavaScript框架＞事件处理&高阶函数&函数柯里化

如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

  • 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
  • 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。

常见的高阶函数有：Promise、setTimeout、arr.map()......

1.函数柯里化：

        函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

柯里化概述：

        在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。

        柯里化技术，主要体现在函数里面返回函数。就是将多变量函数拆解为单变量（或部分变量）的多个函数并依次调用。

        再直白一点：利用闭包，可以形成一个不销毁的私有作用域，把预先处理的内容都存在这个不销毁的作用域里面，并且返回一个函数，以后要执行的就是这个函数。

柯里化的应用：

柯里化有 3 个常见应用：

  • 参数复用 – 当在多次调用同一个函数，并且传递的参数绝大多数是相同的，那么该函数可能是一个很好的柯里化候选
  • 提前返回 – 多次调用多次内部判断，可以直接把第一次判断的结果返回外部接收
  • 延迟计算/运行 – 避免重复的去执行程序，等真正需要结果的时候再执行

一文看懂 JavaScript 函数柯里化 - 什么是柯里化 - 云+社区 - 腾讯云柯里化技术，主要体现在函数里面返回函数。就是将多变量函数拆解为单变量（或部分变量）的多个函数并依次调用。【React】＜JavaScript框架＞事件处理&高阶函数&函数柯里化https://cloud.tencent.com/developer/article/1851152

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>高阶函数_函数柯里化</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//#region 
				/* 
					高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
									1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
									2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
									常见的高阶函数有：Promise、setTimeout、arr.map()等等

					函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 
						function sum(a){
							return(b)=>{
								return (c)=>{
									return a+b+c
								}
							}
						}
					*/
		//#endregion
		//创建组件
		class Login extends React.Component{
			//初始化状态
			state = {
				username:'', //用户名
				password:'' //密码
			}

			//保存表单数据到状态中
			saveFormData = (dataType)=>{
				return (event)=>{
					this.setState({[dataType]:event.target.value})
				}
			}

			//表单提交的回调
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
						密码：<input onChange={this.saveFormData('password')} type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>
</body>
</html>

 2.不使用柯里化：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_不用函数柯里化的实现</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//创建组件
		class Login extends React.Component{
			//初始化状态
			state = {
				username:'', //用户名
				password:'' //密码
			}

			//保存表单数据到状态中
			saveFormData = (dataType,event)=>{
				this.setState({[dataType]:event.target.value})
			}

			//表单提交的回调
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
						密码：<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>
</body>
</html>

【React】＜JavaScript框架＞事件处理&高阶函数&函数柯里化

上一篇：java实现MD5随机盐加密


下一篇：微信小程序通过get请求接口实现简单功能