高阶函数概念及案例

最新推荐文章于 2024-11-13 15:29:17 发布

种草小妖儿.

最新推荐文章于 2024-11-13 15:29:17 发布

阅读量124

点赞数

分类专栏： React 文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/S2763427717/article/details/131289080

版权

React 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章展示了高阶函数的概念，包括接受函数作为参数或返回一个函数的特性，并通过React组件中的事件处理函数`formData`为例，解释了如何使用高阶函数简化代码。对比了使用和不使用函数柯里化的不同写法，强调了高阶函数在状态管理和代码简洁性上的优势。

摘要由CSDN通过智能技术生成

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

案例（第2个规范）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高阶函数</title>
</head>
<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <div id="test"></div>

    <script type="text/babel">
        class Login extends React.Component{
            state = {
                username:'',
                password:''
            }
            handelSubmit = (event)=>{
                event.preventDefault();
                const {username,password} = this.state;
                alert(`用户名：${username}，密码：${password}`)
            }
            formData = (dataType)=>{
                return (event) => {
                    this.setState({[dataType]:event.target.value})
                }
            }
            render(){
                return(
                    <form onSubmit = {this.handelSubmit}>
                        用户名：<input onChange = {this.formData("username")} type="text"/><br/>
                        密码：<input onChange = {this.formData("password")} type="password"/><br/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>
</body>
</html>

上述案例不用高阶函数（函数柯里化）的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不用函数柯里化</title>
</head>
<body>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <div id="test"></div>

    <script type="text/babel">
        
        class Login extends React.Component{
            state = {
                username:'',
                password:''
            }
            handelSubmit = (event)=>{
                event.preventDefault();
                const {username,password} = this.state;
                alert(`用户名：${username}，密码：${password}`)
            }
            formData = (dataType,event)=>{
                // console.log(dataType,'dataType');
                this.setState({[dataType]:event.target.value})
            }
            render(){
                return(
                    <form onSubmit = {this.handelSubmit}>
                        用户名：<input onChange = {event => this.formData("username",event)} type="text"/><br/>
                        密码：<input onChange = {event => this.formData("password",event)} type="password"/><br/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>,document.getElementById('test'))
    </script>
</body>
</html>