React中箭头函数花括号{}与圆括号()的用法区别

这是JavaScript箭头函数的基础语法规则，和React本身没有直接关系，两种写法的差异完全来自箭头函数的返回值逻辑：

• 箭头后接{：代表开启块级函数体，函数内部可以写任意多行逻辑（变量定义、条件判断、hook调用、日志打印等），但不会自动返回任何值，必须手动写return语句指定返回内容，不写return的话函数默认返回undefined。
• 箭头后接(：代表隐式返回写法，括号内的表达式会被直接作为函数返回值，不需要手动写return，这种写法仅适合直接返回内容的简单场景，括号内不能写独立的多行逻辑语句。

你把card-list.component.jsx里的(改成{之后，相当于把原来的隐式返回改成了块级函数体，但没有在函数里加return返回对应的JSX内容，CardList组件最终返回了undefined，React接收到undefined的返回值就不会渲染任何内容，而且这个写法语法完全合法，所以不会报编译错误，只会出现卡片列表不显示的现象。

你原来的CardList隐式返回写法：

const CardList = ({ monsters }) => (
  <div className="card-list">
    {monsters.map(monster => <Card key={monster.id} monster={monster} />)}
  </div>
)

如果要改成大括号的块级写法，必须补充return，两种写法运行效果完全一致：

const CardList = ({ monsters }) => {
  // 块级体内可以写额外逻辑，比如数据过滤、调用hook等
  const filteredMonsters = monsters.filter(m => m.name.includes(searchKeyword))
  return (
    <div className="card-list">
      {filteredMonsters.map(monster => <Card key={monster.id} monster={monster} />)}
    </div>
  )
}

• 用(隐式返回：组件/函数逻辑极简，只需要直接返回JSX或者计算结果，没有额外的内部逻辑时，用这种写法更简洁，减少冗余代码。
• 用{块级函数体：组件内部需要写额外逻辑时（比如调用hooks、处理数据、条件判断、打日志等），必须用大括号包裹函数体，最后手动return需要渲染的内容。

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