React中箭头函数的正确实现：为何删除按钮的两种onClick调用方式效果不同？

嗨，我来帮你把这两种写法的核心差异讲明白，本质就是函数执行时机的问题，新手很容易踩这个坑！

先看你写的第一种不生效的写法：

onClick={handleDelete(user.id)}

当React渲染这个按钮组件的时候，它会立刻执行handleDelete(user.id)这个表达式，把函数执行后的结果（你的handleDelete没有返回值，所以是undefined）赋值给onClick属性。
这就会导致两个问题：

• 页面刚加载，还没点按钮呢，删除逻辑就自动跑了一遍，直接把对应id的用户从列表里删掉了；
• 当你真正点击按钮时，onClick拿到的是undefined，自然不会触发任何操作。甚至如果你的状态更新触发了组件重渲染，还会陷入“渲染→执行删除→状态更新→再渲染”的无限循环。

再看第二种生效的写法：

onClick={() => handleDelete(user.id)}

这里你传给onClick的是一个未执行的箭头函数（匿名回调），它不会在组件渲染时立刻运行，而是被React保存起来。只有当用户点击按钮的那一刻，React才会调用这个箭头函数，然后在函数内部去执行handleDelete(user.id)，完美符合“点击按钮才触发删除”的预期。

另外补充一个小技巧：如果你不想用箭头函数，也可以用bind来绑定参数，写法是：

onClick={handleDelete.bind(null, user.id)}

原理和箭头函数类似，都是给onClick传递一个待执行的函数，而不是函数执行的结果。

备注：内容来源于stack exchange，提问作者Mai Osama