JavaScript中两种函数传入方式的区别答疑

这两种写法不完全等价，第二种也不是第一种的简写形式，核心差异在于传递给 onPress 的内容和函数执行逻辑：

1. 写法本质差异 #

• onPress(() => myFunction())：传递的是一个新的匿名箭头函数，当 onPress 触发时，先执行这个箭头函数，再由箭头函数调用 myFunction()。
• onPress(myFunction)：直接传递的是 myFunction 函数的引用，当 onPress 触发时，会直接调用 myFunction 本身。

2. 不同场景下的表现 #

场景一：myFunction 无需接收参数 #

表面运行效果看似一致，但存在细微区别：

• 箭头函数会创建独立的函数上下文，如果 myFunction 内部依赖 this，箭头函数的 this 会继承自外层作用域，而直接传递函数引用时，this 指向 onPress 触发时的调用上下文（比如组件实例）。
• 每次组件渲染时，箭头函数都会重新创建一个新函数实例，而直接传引用的 myFunction 如果是稳定引用（比如定义在组件外或用 useCallback 包裹），则不会重复创建，这会影响 React 组件的性能优化（比如 memo 组件的浅比较）。

场景二：myFunction 需要接收参数 #

这时候两种写法的差异会直接导致功能不同：

• 用箭头函数可以手动传递参数：

  onPress(() => myFunction(123)) // 触发时 myFunction 收到参数 123
  

• 直接传递函数引用时，onPress 会自动把事件对象作为参数传入：

  onPress(myFunction) // 触发时 myFunction 收到的是点击事件对象，而非预期的参数
  

总结 #

如果 myFunction 不需要参数且不依赖上下文，两种写法在功能上可能表现一致，但严格来说并非等价；如果需要传参或关注性能/上下文，必须根据需求选择对应的写法。

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