react中的函数柯里化

目录

前言：

用法示例：

应用：

参数复用

提前确认

总结：

---

---

前言：

函数柯里化是一种将接受多个参数的函数转化为一系列接受单一参数的函数的技术。在React开发中，函数柯里化可以帮助我们更好地组织组件的代码，使其具有更好的可读性和可复用性。

用法示例：

一个简单的函数柯里化示例：

function add(a) {
  return function(b) {
    return a + b;
  }
}

const addFive = add(5);
console.log(addFive(3)); // 8

在React中，我们可以使用函数柯里化来处理组件的props，并返回一个新的组件。例如，我们可以编写一个高阶组件来将一个组件的属性加倍：

function withDoubleProps(Component) {
  return function(props) {
    const newProps = {
      ...props,
      value: props.value * 2
    };
    return <Component {...newProps} />;
  }
}

function MyComponent(props) {
  return <div>{props.value}</div>;
}

const MyComponentWithDoubleProps = withDoubleProps(MyComponent);

<MyComponentWithDoubleProps value={5} /> // 输出10

这样，我们就可以使用withDoubleProps函数来对我们的组件进行柯里化处理，并返回具有双倍props值的新组件，从而实现代码的重用和可读性的提高。

应用：

参数复用

就是将相同的参数固定下来。

// 正常正则验证字符串 reg.test(txt)

// 函数封装后
function check(reg, txt) {
    return reg.test(txt)
}

// 即使是相同的正则表达式，也需要重新传递一次
console.log(check(/\d+/g, 'test1')); // true
console.log(check(/\d+/g, 'testtest')); // false
console.log(check(/[a-z]+/g, 'test')); // true

// Currying后
function curryingCheck(reg) {
    return function (txt) {
        return reg.test(txt)
    }
}

// 正则表达式通过闭包保存了起来
var hasNumber = curryingCheck(/\d+/g)
var hasLetter = curryingCheck(/[a-z]+/g)

console.log(hasNumber('test1')); // true
console.log(hasNumber('testtest'));  // false
console.log(hasLetter('21212')); // false

上面的示例是一个正则的校验，正常来说直接调用 check 函数就可以了，但是如果我有很多地方都要校验是否有数字，其实就是需要将第一个参数 reg 进行复用，这样别的地方就能够直接调用 hasNumber、hasLetter 等函数，让参数能够复用，调用起来也更方便。

提前确认

/**
 * 
 * @param {要绑定事件的 DOM 元素} element 
 * @param {绑定什么事件} event 
 * @param {事件处理函数} handler 
 */
var on = function (element, event, handler) {
    if (document.addEventListener) {
        if (element && event && handler) {
            element.addEventListener(event, handler, false);
        }
    } else {
        if (element && event && handler) {
            element.attachEvent('on' + event, handler);
        }
    }
}

on(div, 'click', function(){})


var on = (function () {
    if (document.addEventListener) {
        return function (element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        };
    } else {
        return function (element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler);
            }
        };
    }
})();

on(div, 'click', function(){})

//换一种写法可能比较好理解一点，上面就是把 isSupport 这个参数给先确定下来了
var on = function (isSupport, element, event, handler) {
    isSupport = isSupport || document.addEventListener;
    if (isSupport) {
        return element.addEventListener(event, handler, false);
    } else {
        return element.attachEvent('on' + event, handler);
    }
}
on(true, div, 'click', function(){})
on(true, div, 'click', function(){})
on(true, div, 'click', function(){})

我们在做项目的过程中，封装一些 DOM 操作可以说再常见不过，上面第一种写法也是比较常见，但是我们看看第二种写法，它相对于第一种写法就是自执行然后返回一个新的函数，这样其实就是提前确定了会走哪一个方法，避免每次都进行判断。

总结：

柯里化的函数首先会接受一些参数，接受了这些参数之后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。