方法1：
const BasicProfileInfo = (props: BasicProfileInfoProps) => {
return (
<MainContainer>
{....}
</MainContainer>
)
}
方法二：
function BasicProfileInfo(props: BasicProfileInfoProps){
return (
<MainContainer>
{....}
</MainContainer>
)
}
项目环境：
箭头函数可以缩短为隐含返回：
const BasicProfileInfo = (props: BasicProfileInfoProps) => (
<MainContainer>
{....}
</MainContainer>
);
但是它在ES5输出中的占用空间比常规函数声明多了一点，因为箭头以任何方式传递到常规函数：
var BasicProfileInfo = function BasicProfileInfo(props) { return ... }
这是它们作为无状态组件的唯一区别。箭头函数没有自己的this和参数，但情况并非如此。
使用“arrow function”（箭头函数）表示法的一个优点是，箭头函数没有自己的this值，如果您想从外部函数定义中保留this，这一点很有用。
但是，如果您的组件是无状态的，这并不重要，所以使用哪一个组件也不重要。
React组件将使用函数名作为调试消息和开发人员控制台中的显示名。默认的显示名称是组件，它的用处要小得多。我认为，仅此一点就足以让我们更喜欢显式命名的函数（方法2）。
编辑：如下所述，OP的任何一种方法都将正确填充displayName。唯一不会出现的情况是导出真正匿名的函数，如：export default（）=
