请问嵌套箭头函数的工作原理是什么？React中该handleChange写法如何运行？

你贴的是React类组件中非常常用的柯里化事件处理函数写法，本质是利用了高阶函数和箭头函数的特性简化代码，我们可以拆分理解：

1. 语法等价转换 #

这段连续箭头函数的写法，等价于下面的普通函数实现，只是箭头函数自动绑定了外层this，不需要额外手动绑定上下文：

handleChange = function (input) {
  // 第一层函数接收要更新的state字段名
  return function (e) {
    // 第二层是真正的事件回调，接收事件对象e
    this.setState({
      [input]: e.target.value
    })
  }.bind(this)
}

2. 运行流程 #

• 你在给表单元素绑定事件时，会先调用第一层函数传入对应的state字段名，比如this.handleChange('username')，此时会返回一个新的箭头函数作为onChange的回调
• 当用户触发输入事件时，浏览器会把事件对象e传入返回的这个箭头函数，函数内部就会把输入的值更新到你之前指定的state字段上

3. 优势和适用场景 #

这种写法最大的作用是复用表单处理逻辑，你不需要给每个输入框单独写一个change处理函数，直接复用同一个即可：

// 渲染时的示例用法
<input name="username" onChange={this.handleChange('username')} />
<input name="password" onChange={this.handleChange('password')} />
<input name="email" onChange={this.handleChange('email')} />

对比直接在onChange里写匿名函数的写法，这种柯里化的实现性能更优，也更便于维护。

内容的提问来源于stack exchange，提问作者Nischal