React两种mapStateToProps写法差异、语法2定义及偏好原因咨询

先搞懂两种语法是什么 #

这两种写法本质都是JavaScript箭头函数的不同用法，并非React专属，只是在Redux的mapStateToProps场景下经常用到：

语法1：显式返回的箭头函数 #

const mapStateToProps = (state) => {
  return { outputProp: state.output }
}

这是箭头函数的标准写法，大括号{}定义了函数体，必须通过return语句明确返回要映射的对象。如果需要在函数里加额外逻辑（比如打印日志、处理state数据），这种写法更合适。

语法2：隐式返回的箭头函数 #

const mapStateToProps = (state) => ({
  outputProp: state.output
})

这是箭头函数的隐式返回语法糖。因为如果直接写(state) => { outputProp: state.output }，JavaScript会把大括号识别成函数体，而非对象字面量，导致代码报错或返回undefined。用圆括号()把对象包裹起来，就是告诉JS引擎：这是我要直接返回的对象，不用写return。

两者的核心区别 #

• 语法1支持多行逻辑，必须显式写return才能返回对象
• 语法2是单行场景的简化写法，省略了return和外层大括号，只能用于直接返回单个对象的情况

为什么React社区更偏好语法2写mapStateToProps #

原因很简单，mapStateToProps的职责通常非常单一：就是把Redux store里的state字段映射成组件的props，几乎不需要额外的复杂逻辑。用语法2有几个明显优势：

1. 代码更简洁：少了冗余的return和大括号，一行就能完成映射，可读性更高
2. 减少低级bug：避免因为忘记写return导致的错误（比如不小心写成(state) => { outputProp: state.output }，此时函数实际返回undefined，组件会拿不到预期的props）
3. 符合社区惯例：React和Redux的官方示例、绝大多数开源项目都用这种写法，属于行业通用的编码习惯

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