无部分应用的柯里化函数？React Firebase认证代码中byPropKey函数疑问

嘿，作为刚接触React、ES6和函数式编程的新手，能注意到这个函数的柯里化特性已经很棒了！让我一步步给你拆解清楚：

1. 这个函数确实属于部分应用风格的柯里化函数 #

先简单掰扯下概念：

• 柯里化（Currying）是把多参数函数拆成一系列单参数函数，每次调用返回新函数，直到所有参数都传入；
• 部分应用（Partial Application）是预先传入部分参数，返回一个等待后续调用的函数（这里后续调用不需要传参了）。

你看到的byPropKey更偏向部分应用，但日常开发中大家经常把这类函数统称为柯里化函数，这个说法完全没问题。

2. 拆解byPropKey的具体逻辑 #

把这个箭头函数展开成普通函数，你就能一眼看懂：

// 等价的普通函数写法
function byPropKey(propertyName, value) {
  // 返回一个无参数的函数
  return function() {
    // 这个函数返回一个对象，用计算属性名设置键值对
    return {
      [propertyName]: value
    };
  };
}

这里有两个关键ES6知识点：

• 多层箭头函数简写：原代码(propertyName, value) => () => ({ ... })，本质就是接收前两个参数，返回一个无参函数；
• 计算属性名：{ [propertyName]: value }里的方括号是ES6新增语法，意思是对象的键名是propertyName变量的实际值（比如你传的'username'），而不是字符串'propertyName'。

3. 在React状态更新中的作用 #

结合你给出的输入框代码来看：

<input 
  value={username} 
  onChange={event => this.setState(byPropKey('username', event.target.value))} 
  type="text" 
  placeholder="Full Name" 
/>

当输入框内容变化时：

1. onChange触发，拿到event.target.value；
2. 调用byPropKey('username', event.target.value)，传入属性名和对应值后，得到一个无参函数；
3. this.setState会执行这个无参函数，拿到返回的{ username: event.target.value }，然后更新组件状态。

为什么要这么写？——核心是复用逻辑！ #

如果不用这个函数，你得给每个输入框写重复的代码：

// 没有byPropKey的写法，每个输入框都要重复写{ key: value }
<input 
  value={username} 
  onChange={event => this.setState({ username: event.target.value })} 
  type="text" 
/>
<input 
  value={email} 
  onChange={event => this.setState({ email: event.target.value })} 
  type="email" 
/>

而用byPropKey的话，不管有多少个输入框，都可以复用同一个逻辑，只需要传入不同的属性名和值，大大减少了重复代码，让代码更简洁。

总结 #

byPropKey的核心作用就是封装“生成单个属性的状态更新对象”的逻辑，通过部分应用（柯里化）的方式，让我们可以更高效地处理多个输入框的状态更新，同时也体现了函数式编程中“复用逻辑”的思想。

内容的提问来源于stack exchange，提问作者Jan Parzydło