React中两种箭头函数写法差异：{;}与(,)的区别

底层运行逻辑的区别 #

• 块级箭头函数（第一种写法）：用{}包裹函数体，里面是两条独立执行的语句，先运行function1()，再运行function2()。这种写法里，箭头函数默认返回undefined，除非你手动添加return语句指定返回值。
• 逗号表达式+隐式返回（第二种写法）：箭头函数用()包裹的是一个逗号表达式。逗号表达式的规则是按顺序执行所有子表达式，最终返回最后一个表达式的执行结果。所以这里会先执行function1()，再执行function2()，同时箭头函数会把function2()的返回值作为自己的返回值。

测试结果一致的原因 #

你测试时没用到箭头函数的返回值，所以看起来效果一样。如果function2()有返回值，两种写法的差异立刻就显现了：

function function1() { console.log('执行func1'); }
function function2() { console.log('执行func2'); return 'func2的返回值'; }

const handler1 = () => { function1(); function2(); };
const handler2 = () => (function1(), function2());

console.log(handler1()); // 输出 undefined
console.log(handler2()); // 输出 'func2的返回值'

选用建议 #

• 优先用第一种块级写法：可读性更强，后续要加变量声明、条件判断、更多执行语句时，直接在{}里扩展就行，维护成本低。适合绝大多数场景，尤其是不需要返回值的情况。
• 第二种写法只适合逻辑极简单的场景：比如你明确需要返回最后一个函数的结果，且代码只有两三个表达式时可以用，但不要在复杂逻辑里用，不然别人读代码时容易忽略逗号表达式的返回规则。

能否所有场景互换？ #

绝对不能！核心差异在返回值：

• 如果你的代码依赖箭头函数的返回值（比如把handler的返回值用来做其他逻辑），两种写法结果完全不同，换了就会出bug。
• 即使不需要返回值，从代码可读性和可维护性角度，也不建议随便互换，第一种写法始终是更稳妥的选择。

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