JavaScript中的下划线箭头语法是什么含义？React场景相关疑问

问题解答 #

这里的下划线不是函数名，是箭头函数的形参占位符。

箭头函数语法规则说明 #

ES6箭头函数支持两类常用简写：

• 当函数只有1个形参时，可以省略包裹形参的圆括号
• 当函数体只有1行执行语句/返回语句时，可以省略包裹函数体的花括号，以及return关键字（如果是返回值场景）

你看到的const _onClick = _ => setClick(!clicked);，就是同时用到了上面两个简写规则的写法。

下划线的作用 #

_是JS开发者约定俗成的编码习惯，用来表示「这个形参不会被用到，仅做占位使用」。它和你写的无参写法() => { setClick(!clicked); }在你当前的React点击事件场景下执行效果完全一致，二者唯一的语法区别是：

• _ => 实际声明了一个接收1个参数的函数，只是开发者主动选择不使用这个参数
• () => 明确声明了一个不接收任何参数的函数

在React的点击事件回调场景中，如果你不需要用到点击事件对象event，写_ =>和() =>没有实际功能差异，选哪种完全看团队编码规范或个人习惯。

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