React中onClick事件使用箭头函数隐式返回是否为合理写法？

你提到的两种onClick回调写法均不属于错误用法，功能表现完全一致，不存在需要强制规避的问题，差异仅在代码风格和适用场景。

两种写法的底层差异 #

两种写法是箭头函数不同语法规则的体现，运行结果没有本质区别：

• 隐式返回写法（无大括号）：当箭头函数函数体仅包含单个表达式时，可以省略大括号和return语句，自动返回该表达式的执行结果
  示例代码：

  <Button onClick={() => history.push('/urlTing') }>
     Ting
  </Button>
  

  这里history.push的返回值为undefined，React的合成事件机制本身不关心回调函数的返回值，且React合成事件和原生DOM事件不同，哪怕回调返回false也不会自动阻止默认行为，因此返回值不会产生任何副作用。
• 显式函数体写法（带大括号）：箭头函数包裹大括号后，需要手动写return语句才会有返回值，无return时默认返回undefined，和上述写法的最终返回结果完全一致
  示例代码：

  <Button onClick={() => {
     history.push('/urlTing'); 
  }}>
     Ting
  </Button>
  

适用场景建议 #

• 当回调逻辑仅为单行表达式时，隐式返回写法更简洁，是前端社区非常普遍的惯用写法，完全可以正常使用，既不属于需要优化的写法也不属于错误写法，仅为代码风格选择
• 当回调逻辑包含多行语句、临时变量声明、分支判断等复杂逻辑时，必须使用带大括号的显式函数体写法，避免语法错误
• 两种写法无性能差异，编译后运行效率完全相同，团队内统一代码风格、符合lint规则即可

注意事项 #

唯一需要规避的误用场景是：需要写多行逻辑时遗漏大括号，会导致第二行及之后的代码无法执行，触发语法错误：

// 错误写法：语法报错，第二个语句无法执行
<Button onClick={() => history.push('/urlTing') console.log('跳转成功') }>
   Ting
</Button>

// 正确写法：多语句必须加花括号
<Button onClick={() => {
   history.push('/urlTing');
   console.log('跳转成功');
}}>
   Ting
</Button>

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