DEV Community ·

React 精通：理解 `onChange={handleChange}` 与 `onChange={(e) => handleChange(e)}` 的区别

💡 原文英文，约600词，阅读约需2分钟。

📝

内容提要

在现代React开发中，事件处理是构建响应式界面的基础。本文比较了两种onChange写法：onChange={handleChange}更高效，直接传递函数引用；而onChange={(e) => handleChange(e)}更灵活，但每次渲染都会创建新函数。选择应根据需求。

🎯

在现代React开发中，事件处理是构建响应式界面的基础。
比较了两种onChange写法：onChange={handleChange}和onChange={(e) => handleChange(e)}。
onChange={handleChange}更高效，直接传递函数引用，不会在每次渲染时创建新函数。
onChange={(e) => handleChange(e)}更灵活，但每次渲染都会创建新函数，可能影响性能。
选择使用哪种写法应根据需求：简单事件转发使用onChange={handleChange}，需要额外逻辑时使用onChange={(e) => handleChange(e)}。
使用React.memo时，避免在onChange等事件中使用箭头函数，除非用useCallback包裹，以避免不必要的重新渲染。

🔎

在选择事件处理方式时，性能是一个重要考量。使用onChange={handleChange}可以避免每次渲染时创建新函数，从而提高性能，特别是在频繁更新的组件中。相对而言，onChange={(e) => handleChange(e)}虽然灵活，但会导致性能下降，尤其是在大型应用中。

选择哪种onChange写法应根据具体需求。如果只是简单的事件转发，推荐使用onChange={handleChange}，这样代码更简洁且易于维护。而当需要在事件处理前添加额外逻辑或传递额外参数时，onChange={(e) => handleChange(e)}则更为合适。

在使用React.memo时，避免在事件处理函数中使用箭头函数，除非使用useCallback进行包裹。这是因为箭头函数会导致每次渲染时创建新函数，影响React.memo的性能优化效果，可能导致不必要的重新渲染。

❓

onChange={handleChange} 更高效，直接传递函数引用，而 onChange={(e) => handleChange(e)} 更灵活，但每次渲染都会创建新函数。

当需要在调用处理函数之前添加额外逻辑或传递额外参数时，应该使用 onChange={(e) => handleChange(e)}。

使用 onChange={handleChange} 的好处包括更清晰的语法、更好的性能和更容易的优化。

使用 onChange={(e) => handleChange(e)} 的缺点是每次渲染都会创建新函数，可能导致性能下降，且不易与 React.memo 优化。

在使用 React.memo 时，避免在 onChange 中使用箭头函数，除非用 useCallback 包裹，以避免不必要的重新渲染。

选择使用哪种写法应根据需求：简单事件转发使用 onChange={handleChange}，需要额外逻辑时使用 onChange={(e) => handleChange(e)}。

🏷️