React表单提交事件为何无需箭头函数？与click/change事件有何差异？

首先得澄清一个关键误解：无限重渲染和事件类型（submit/click/change）无关，也不是因为没包箭头函数，核心问题是你有没有在组件渲染时直接调用了事件处理函数。

先看你例子里的正确写法：

<form onSubmit={handleSubmit}>

这里传递给onSubmit的是函数引用，只有当表单触发提交事件（比如点击按钮、按回车）时，handleSubmit才会被执行。每次组件渲染时，虽然handleSubmit会被重新创建，但只是把新的函数引用传给了表单，这个过程不会触发submit事件，自然也不会执行里面的setNewItem，所以不会引发无限循环。

那你之前看到的“需要用箭头函数”的场景，通常是两种情况：

• 需要给处理函数传递额外参数：比如要给点击事件传id，直接写onClick={handleClick(id)}会在渲染时立即执行handleClick，如果里面有状态更新就会无限循环，所以必须用箭头函数包裹成onClick={() => handleClick(id)}，让它只有点击时才执行。
• 避免子组件不必要重渲染：如果把内联箭头函数作为prop传给子组件，子组件没做memo优化的话，每次父组件渲染都会因为prop变化重新渲染。但这只是性能问题，不是无限重渲染。

再看你的handleSubmit，它不需要额外参数，React会自动把事件对象e传入，所以直接传函数引用完全没问题。哪怕它里面会修改状态，也只有在提交事件触发时才会执行，触发一次渲染，这是正常的业务流程，不是无限循环。

反过来，如果写成下面这种错误写法，不管是submit还是click事件，都会无限重渲染：

<form onSubmit={handleSubmit()}>

这里handleSubmit()是直接调用函数，每次组件渲染都会执行它，里面的setNewItem会触发状态更新，导致组件重新渲染，然后又执行handleSubmit()，形成无限循环——这才是需要避免的情况，和箭头函数没关系。

总结一下：

• 事件处理函数是否需要箭头函数包裹，取决于你是否要传参，以及是否要优化子组件渲染，和事件类型无关。
• 你例子中的写法是完全正确的，不会引发无限重渲染，和click/change事件的正确处理逻辑一致，不存在“submit事件特殊”的情况。

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