reactjs - 无状态 react 函数的首选语法是什么？为什么？

Question

方法一:

const BasicProfileInfo = (props: BasicProfileInfoProps) => {
    return (
            <MainContainer>
              {....}
            </MainContainer>
    )
}

方法2:

function BasicProfileInfo(props: BasicProfileInfoProps){
    return (
            <MainContainer>
              {....}
            </MainContainer>
    )
}

项目环境:

• babel-eslint:8.0.2
• babel-plugin-transform-class-properties:6.24.1
• babel-preset-es2015:6.24.1
• babel-preset-react-native:4.0.0
• react :16.0.0
• react 原生:0.48.4
• mobx:3.3.1
• mobx-react:4.3.3

Answer 1

箭头函数可以缩短为隐式返回:

const BasicProfileInfo = (props: BasicProfileInfoProps) => (
    <MainContainer>
      {....}
    </MainContainer>
);

但它在 ES5 输出中的占用空间比常规函数声明要多一些，因为箭头会以任何方式转换为常规函数:

var BasicProfileInfo = function BasicProfileInfo(props) { return ... }

这是它们作为无状态组件之间的唯一区别。箭头函数没有自己的 this 和 arguments，但事实并非如此。