为什么onChange事件处理程序中需要返回一个函数？

这是React事件绑定场景下非常典型的「函数立即执行」和「函数引用传递」差异导致的问题，具体原因如下：

• 未返回函数时的异常触发逻辑
  你绑定事件时大概率采用了直接调用函数的写法：

// 事件处理函数定义
const handleChange = (id) => {
  console.log("事件触发", id)
  // 其他业务逻辑
}

// 渲染Checkbox时的绑定代码
{list.map(item => <Checkbox onChange={handleChange(item.id)} />)}

这种写法里handleChange(item.id)属于函数调用表达式，组件渲染遍历列表时，每遍历一个Checkbox就会立刻执行一次handleChange函数，你有8个Checkbox就会执行8次，不需要任何点击操作，这就是你看到未修改Checkbox就触发8次事件的原因。

• 返回函数后的正常运行逻辑
  当你修改为返回函数的高阶函数写法后，代码结构如下：

// 事件处理函数定义（高阶函数形式）
const handleChange = (id) => {
  // 此处return的函数才是真正绑定到onChange的事件处理逻辑
  return (e) => {
    console.log("事件触发", id)
    // 其他业务逻辑
  }
}

// 渲染绑定代码不变
{list.map(item => <Checkbox onChange={handleChange(item.id)} />)}

此时handleChange(item.id)执行后返回的是一个未执行的函数引用，这个引用会被赋值给onChange属性，只有当你实际点击Checkbox触发onChange事件时，React才会调用这个返回的函数执行逻辑，所以仅点击时才会触发，每次点击仅执行1次，符合预期。

如果不想用高阶函数写法，也可以直接在绑定时用箭头函数包裹，效果完全一致：

<Checkbox onChange={() => handleChange(item.id)} />

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