React：隐式返回 vs. 显式返回之争，你站哪边？

Source: Dev.to

参赛者

快速回顾一下我们正在争论的两种写法。

1. 隐式返回（“时尚”写法）

如果你的组件只是一味把 props 直接塞进 JSX，你可以完全省去大括号 {} 和 return 关键字。通常会把 JSX 包在圆括号 () 中。

它看起来简洁、整齐，非常“函数式”。

// 看啊，没大括号！
// 对于简单的展示组件非常干净。
const UserCard = ({ username, avatarUrl }) => (


### {username}


);

2. 显式返回（“安全”写法）

这使用带大括号 {} 的标准块体语法。因为打开了大括号，你必须写 return 关键字来渲染内容。

只要在渲染之前有任何逻辑、hook 或变量声明，就必须使用这种写法。

const UserCard = ({ user }) => {
  // 渲染前有逻辑...
  const displayName = user.name.toUpperCase();
  const isPremium = user.tier === 'gold';

  // ...所以我们必须显式返回。
  return (


    ### {displayName}


  );
};

灰色地带（争论所在）

没有人会对上面的例子有异议。问题出在灰色地带。

“习惯性显式”

有时我会看到开发者出于习惯使用显式返回，即使在返回之前根本没有任何逻辑。这会多出三行冗余代码（大括号和 return），却没有任何功能上的必要。

“扭曲的隐式”

相反，我也常看到开发者为了保持“时尚”的隐式语法而过度努力。他们会在 JSX 中嵌套四层的三元运算符，只是为了避免打开大括号并在返回前写一个凌乱的 if/else 块。这看起来可能更“酷”，但六个月后阅读起来简直是噩梦。

“陷阱” ⚠️

还有经典的新手错误。如果你尝试隐式返回一个对象字面量（在工具函数或旧版 Redux mapStateToProps 中很常见），JavaScript 会把对象的大括号误认为是函数体的大括号。

// ❌ 错误。返回 undefined。JS 产生混淆。
const getInitialState = () => { id: 1, active: true };

// ✅ 正确。必须把对象包在圆括号里。
const getInitialState = () => ({ id: 1, active: true });

讨论

我的经验法则是：默认使用隐式返回以保持简洁，但一旦 JSX 难以在一次阅读中快速扫描，就改用显式返回。

可读性 > 简洁性。每一次都是如此。

但我知道很多团队会通过严格的 lint 规则来强制其中一种写法。

你怎么看？

• 你是隐式派（追求简短）还是显式派（追求明确）？
• 你觉得隐式返回会让代码更难调试吗？

在评论区一起讨论语法吧！ 👇