Arrow function、function、const三种实现的差异及适用场景疑问

三者本质定义 #

• solutionA：ES6箭头函数语法定义的React函数组件
• solutionB：普通函数语法定义的React函数组件
• solutionC：直接赋值的静态JSX元素，不属于函数范畴

箭头函数组件（solutionA）和普通函数组件（solutionB）的适用场景 #

两者作为React函数组件使用时，绝大多数场景下功能完全一致，差异仅来自JS语法本身的特性，按需选择即可：

• 优先选箭头函数的场景：
  • 想要更简洁的写法，单行返回时可以省略大括号和return关键字，比如可以简写为const solutionA = () => <p>A Text</p>
  • 需要继承外层作用域的this，不需要函数自己的this上下文，避免额外的bind操作
    目前React社区写函数组件普遍更偏好箭头函数写法，代码更轻便
• 优先选普通函数的场景：
  • 需要用到函数声明提升的特性，比如要在代码中函数定义的位置之前就调用该组件
  • 该函数除了作为组件使用，还要支持new调用、原型扩展等普通函数特有的能力

静态JSX赋值（solutionC）的适用场景 #

这种写法只是把一段写死的JSX元素赋值给变量，完全没有函数的特性，不能接收参数、不能写hooks逻辑、也不能做动态计算，只适合使用纯静态、不需要任何变动的内容，渲染时直接引用变量即可，不需要加括号调用。
如果后续需要加动态逻辑（比如根据传入的props改内容、加状态、加副作用），必须换成前两种函数组件的写法。

内容的提问来源于stack exchange，提问作者Newbie Dev Guy