箭头函数箭头后用()和{}有什么区别？结合React useEffect场景说明

你看到的这些写法差异，本质都是围绕箭头函数的返回值规则、以及JS语法的歧义问题衍生出来的写法选择，没有什么特殊魔法，搞懂底层逻辑就不会乱。

箭头函数的两种基础函数体模式 #

首先要理清箭头函数最核心的两种执行模式：

• 带花括号 {} 的代码块模式：这也是你平时写多行逻辑常用的方式，这对花括号的语义是包裹一段独立的可执行代码块，里面必须手动写return才能返回值，不写的话函数默认返回undefined。适合有分支判断、多步操作、临时变量声明的复杂逻辑，比如你看到的useEffect最外层的回调函数，里面有if (chatId)的判断、链式调用多个数据库方法，就适合用这种模式。
• 单表达式返回模式：如果函数的逻辑只是执行完一个表达式就把结果返回，完全不需要额外的代码块逻辑，就可以省略花括号和return关键字，直接把表达式写在箭头后面，JS会自动把表达式的执行结果作为函数的返回值，能省不少样板代码。

为什么会出现 => ( ... ) 的写法 #

你看到的snapshot => ( setMessages(...) )，本质是单表达式返回模式的排版优化：
如果这个返回的表达式本身很长，需要跨多行排版，如果直接换行写，JS解析器有可能把换行后的内容误判为新的代码语句，用一对圆括号把整个要返回的表达式包起来，就能明确告诉解析器“括号里的所有内容都是一个连续的表达式，结果要当返回值”。
这种写法和普通单表达式返回、甚至大括号加return的写法是完全等价的：

// 写法1：用圆括号包长表达式，排版更清晰
snapshot => (
  setMessages(snapshot.docs.map(...))
)

// 写法2：单行直接写，不需要括号
snapshot => setMessages(snapshot.docs.map(...))

// 写法3：传统大括号+手动return
snapshot => {
  return setMessages(snapshot.docs.map(...))
}

以上三种写法的执行效果没有任何区别，只是排版习惯不同。

为什么返回对象的时候要写成 => ({ ... }) #

这是JS箭头函数最容易踩的语法歧义坑，也是教程里出现这种写法的核心原因：
如果需要直接返回一个对象字面量，绝对不能直接在箭头后面跟写对象的花括号——因为JS的解析规则里，箭头函数后面出现的第一对{，会被优先判定为函数体代码块的开始，而不是对象字面量的开始。
举个错误写法的实际解析结果：

// 看起来是要返回对象，实际完全不符合预期
doc => {
  id: doc.id,
  data: doc.data()
}

上面这段代码，JS根本不会把大括号里的内容当成对象属性，而是会当成函数体的代码块来解析：里面的id: doc.id会被识别为一个标签语句，整个代码块没有任何return语句，最终函数会返回undefined，完全不是我们想要的返回对象的效果。
解决方法就是用一对圆括号把整个对象字面量包起来——圆括号内部是明确的表达式上下文，这时候里面的大括号就会被正确解析为对象字面量，最终能正常返回想要的对象。

通用使用规则 #

实际写代码的时候不需要死记硬背格式，照着下面的场景选写法就不会出错：

• 函数内有分支判断、多步操作、临时变量声明这类复杂逻辑，老老实实用{}包代码块，需要返回值的时候手动写return，可读性最高，也不容易出bug。
• 函数只需要返回单表达式的结果，不需要额外逻辑时，可以直接省略return写表达式，减少冗余代码。
• 单表达式内容太长需要换行排版时，用()把整个返回表达式包起来，避免换行被解析器误判成语句的结束。
• 只要箭头函数需要直接返回一个对象字面量，就必须用()把对象的{}包起来，避免触发语法歧义。

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