【React】<JavaScript框架>事件处理&高阶函数&函数柯里化
2022/1/30 22:04:30
本文主要是介绍【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="点击按钮提示数据"/> </div> ) } //传入event,指定当前元素节点(搜控组件) showData = (event)=>{ console.log(event.target) alert(event.target.value) } } //将组件渲染到页面: ReactDOM.render(<Demo/>,document.getElementById("test")) </script> </html>
二、收集表单数据:
包含表单的组件分类:
- 受控组件
- 非受控组件
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/> 密 码:<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>
三、高阶函数&函数的柯里化:
如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。
- 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。
- 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。
常见的高阶函数有:Promise、setTimeout、arr.map()......
1.函数柯里化:
函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。
柯里化概述:
在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。
柯里化技术,主要体现在函数里面返回函数。就是将多变量函数拆解为单变量(或部分变量)的多个函数并依次调用。
再直白一点:利用闭包,可以形成一个不销毁的私有作用域,把预先处理的内容都存在这个不销毁的作用域里面,并且返回一个函数,以后要执行的就是这个函数。
柯里化的应用:
柯里化有 3 个常见应用:
- 参数复用 – 当在多次调用同一个函数,并且传递的参数绝大多数是相同的,那么该函数可能是一个很好的柯里化候选
- 提前返回 – 多次调用多次内部判断,可以直接把第一次判断的结果返回外部接收
- 延迟计算/运行 – 避免重复的去执行程序,等真正需要结果的时候再执行
一文看懂 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框架>事件处理&高阶函数&函数柯里化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)