在React中使用“柯里化”，让你“爽”到爆炸
大家好，我是梦兽。一个 WEB 全栈开发和 Rust 爱好者。如果你对 Rust 非常感兴趣，可以关注梦兽编程公众号获取群，进入和梦兽一起交流。
柯里化是一种JavaScript技术，它将一个具有多个参数的函数转换为一系列每次只接受一个参数的函数。
为什么使用柯里化？
灵活性：它允许我们通过预设某些参数并保留其他参数来从现有函数创建新函数。
可重用性：函数可以在某些参数预填充的情况下重复使用。
简洁性：在处理复杂逻辑时，它使编码变得更加容易。
如何实现柯里化？
在JavaScript中，有两种方式可以实现柯里化：
- 使用Bind
- 使用闭包
让我们通过一个简单的乘法函数来探索这两种实现方法，该函数接受两个参数num1和num2。现在我需要一个函数，它将一个数字乘以二，这意味着它只需一个参数，并且提供的数字将被乘以2。让我们使用柯里化来解决这个问题。
使用Bind实现
让我们来写一个函数，该函数将两个数字相乘。
let multiply = (num1, num2) => {
return num1 * num2
}
这就是我们如何使用柯里化来实现我们的第二个函数 multiplyBy2。
let multiplyBy2 = multiply.bind(this, 2)
这就是函数如何被调用的方式。
multiply(2, 3) // Returns 6
multiplyBy2(4) // Returns 8
闭包
在闭包的情况下，我们需要修改 multiply 函数，使其包含一个用于第二个参数的内部函数。
let multiply = function(x) {
return function(y) {
return x*y
}
}
这里，内部函数可以访问其父函数的作用域。这在 JavaScript 中称为闭包。让我们在这里实现我们的 multiplyBy2 函数。
let multiplyBy2 = multiply(2)
这就是函数如何被调用的方式。
multiply(2)(3) // Returns 6
multiplyBy2(4) // Returns 8
React中使用“柯里化”
如果你做React开发，React中的一些事件的封装会显得非常舒服与美观，比如有这么一个场景：
不是使用柯里化的时候我们可能会这么写
const onClick = (e,id) => {
// dosome
}
data.map((item)=>{
return <button onClick={(e)=>{onClick(e,item.id)}}>{item.name}</button>
})
如果这个时候我们使用“柯里化”
const onClick = (id) => (e) => {
// dosome
}
data.map((item)=>{
// 这里的代码块我们就可以这么写
return <button onClick={onClick(item.id)}>{item.name}</button>
})
再比如这个时候我们需要给我们的方法添加冒泡事件
const stopPropagation = (e)=>{
e.stopPropagation();
}
// 添加中间件这里这是打个比方
const onClick = (id) = (handle) => (e) => {
// dosome
// 实际操作直接这里执行stopPropagation(e)会方便一点。看自己业务场景
handle?.(e)
}
data.map((item)=>{
// 这里的代码块我们就可以这么写
return <button onClick={onClick(item.id)(stopPropagation)}>{item.name}</button>
})
感谢阅读！感谢您的时间，并希望您觉得这篇文章有价值。在您的下一个 JavaScript 项目中尝试使用柯里化，并在下面的评论中告诉我它如何改善了您的编码体验！
创建和维护这个博客以及相关的库带来了十分庞大的工作量，即便我十分热爱它们，仍然需要你们的支持。或者转发文章。通过赞助我，可以让我有能投入更多时间与精力在创造新内容，开发新功能上。赞助我最好的办法是微信公众号看看广告。
本文使用 markdown.com.cn 排版
