React中普通函数与组件用法对比：不同实现方式哪个更推荐？

我们在React项目的user.js文件中常见以下三种写法，其中User是对外导出的组件：

写法1：普通函数返回JSX #

const displayText = (firstName, lastName) => (
  <div>{firstName} {lastName}</div>
)

const User = ({ user }) => (
  <div>
     You are logged in as 
     {displayText(user.firstName, user.lastName)}
  </div>
)

写法2：顶层独立定义子组件 #

const DisplayText = ({ firstName, lastName }) => (
  <div>{firstName} {lastName}</div>
)

const User = ({ user }) => (
  <div>
     You are logged in as 
     <DisplayText firstName={user.firstName} lastName={user.lastName} />
  </div>
)

写法3：组件内部嵌套定义子组件 #

const User = ({ user }) => {
   const DisplayText = ({ firstName, lastName }) => (
     <div>{firstName} {lastName}</div>
   )

  return (
    <div>
     You are logged in as 
     <DisplayText firstName={user.firstName} lastName={user.lastName} />
    </div>
  )
}

优劣对比&推荐方案 #

写法1和写法2的选择 #

• 两者性能差异极小：写法1是普通函数调用，不会触发React组件的生命周期校验、也不会在React开发者工具中生成独立节点，开销比组件渲染略低，但这种差异在常规业务场景下完全感知不到，只有单页渲染节点超过十万级的极端场景才会有明显差距。
• 按需选择即可：
  • 如果这段展示逻辑非常简单、仅在User组件内使用、不需要复用、也不需要添加内部状态/副作用/Hooks，选写法1更简洁
  • 如果这段逻辑后续可能被其他组件复用、需要用到自身的Hooks、或者希望在开发者工具中清晰查看该节点的props变化方便调试，选写法2更合适。

写法3的问题（任何场景都不推荐） #

• 性能损耗最明显：每次User组件重渲染时，都会重新生成一个全新的DisplayText函数，React会判定这是完全不同的组件类型，直接销毁旧节点再重新挂载，而非做正常的Diff更新，既增加了不必要的销毁挂载开销，如果组件内部有状态还会导致状态每次重渲染都被重置。
• 维护成本更高：嵌套定义的组件无法被外部复用，也无法单独做单元测试，代码可读性也更差。

最终推荐优先级 #

逻辑简单无复用需求选写法1，有复用/调试/内部Hooks需求选写法2，完全不要用写法3。

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