Question

方法1：

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
反应：16.0.0
本机：0.48.4
mobx：3.3.1
mobx反应：4.3.3

Answer 1

箭头功能可以缩短为隐含的回报：

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

但是它在ES5输出中比常规函数声明要占用更多空间，因为箭头可以通过任何方式转换为常规函数：

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

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

Answer 2

使用“箭头函数”表示法的一个优点是arrow functions don't have their own this value，如果要从外部函数定义中保留this，这很有用。

但是，如果您的组件是无状态的，则没关系，因此使用哪个组件也没有关系。

Answer 3

反应组件将在调试消息和开发人员控制台中将函数名称用作displayName。默认的displayName是Component，它的用途要少得多。我认为仅此一项就足以始终喜欢使用显式命名的函数（方法2）。

无状态React函数的首选语法是什么？为什么？

3 个答案: