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

Question

Method 1:

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

Method 2:

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

Project Environment:

• 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-native: 0.48.4
• mobx: 3.3.1
• mobx-react: 4.3.3

Answer 1

Arrow function can be shortened to implied return:

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

But it has a bit more footprint in ES5 output than regular function declaration, because an arrow is transpiled to regular function any way:

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

This is the only difference between them as stateless components. Arrow functions don't have their own this and arguments , but this isn't the case.

Answer 2

One advantage of using the 'arrow function' notation is that arrow functions don't have their own this value , which is useful if you want to preserve this from an outer function definition.

But, if your component is stateless, this doesn't matter, so it doesn't matter which one you use.

Answer 3

React components will use the function name as the displayName in debug messages and the developers console. The default displayName is Component , which is much less useful. This alone I think is enough to always prefer explicitly named functions (Method 2).

EDIT: As noted below, either of OP's methods will result in the displayName being populated correctly. The only situation that it will not is when exporting truly anonymous functions like: export default () => {} . So the other answers here are more relevant.