React中箭头函数定义组件时()=>()与()=>{}写法有何区别

两种写法都是箭头函数形式的函数组件，核心差异来自箭头函数的语法规则，具体区别如下：

• 返回值规则完全不同
  • 第一种const Layout = (props) => ();是箭头函数的隐式返回写法：圆括号包裹的内容会被直接作为函数返回值，不需要手动写return关键字。比如直接在括号里写JSX就能被组件正常返回：

    // 正确写法，直接返回布局JSX
    const Layout = (props) => (
      <div className="page-layout">
        {props.children}
      </div>
    )
    

  • 第二种const Layout = (props) => {};是箭头函数的块级函数体写法：大括号包裹的是完整的函数执行上下文，不会自动返回任何内容。如果不手动写return返回JSX，组件会返回undefined，直接触发React渲染报错。正确用法示例：

    const Layout = (props) => {
      // 块内部可以写任意执行逻辑
      const { title, children, theme } = props;
      const containerClass = theme === 'dark' ? 'layout-dark' : 'layout-light';
      // 必须手动return要渲染的内容
      return (
        <div className={containerClass}>
          <h2>{title}</h2>
          {children}
        </div>
      )
    }
    

• 适用场景不同
  • 圆括号隐式返回的写法，仅适合没有额外内部逻辑、直接返回固定JSX结构的纯展示简单组件，优势是代码更简洁，省去冗余的return和大括号。
  • 大括号块级写法是日常开发的通用写法，适合所有复杂场景：你可以在函数体内调用Hooks、做数据处理、写条件分支、声明局部变量，最后按需返回对应的渲染内容。

注意：React要求自定义组件名必须首字母大写，示例里写的小写layout无法被React识别为组件，会被当成普通DOM标签解析，实际使用时要改为大写开头的Layout。

内容的提问来源于stack exchange，提问作者Fahim.ga