What is the most logical way to export React components?

Question

When writing React components in ES6, I sometimes wonder what the most logical way would be to export the component. I found three ways to do this, and mostly I use the first:

default class export

export default class extends Component {
    render() {
        //
    }
}

It seems the easiest way. The only drawback that I see is that the component is not explicitly specified in the file other than the file name.

export of the default class ComponentName

export default class ComponentName extends Component {
    render() {
        //
    }
}

This seems to be pretty much the same as above, except that the class is explicitly specified. Side question: is there a difference between the two when importing a component?

class with separate export

class ComponentName extends Component {
    render() {
        //
    }
}

export default ComponentName

I think this is also programmatically identical to the other two examples, but I'm not sure.

Does one of these three examples have significant benefits for others?

Answer 1

export default class extends Component { ... }

:

• ,

• , defaultProps propTypes

• - , ,

---

ComponentName

export default class ComponentName extends Component { ... }

( : , .)

:

• , , Redux, , .

---

class ComponentName extends Component { ... }

export default ComponentName

:

• .

Answer 2

, , . :

class ComponentName extends Component {
    render() {
        //
    }
}

export default connect(null)(ComponentName);

Answer 3

, , redux, -ui .

Answer 4

. , ( ), , , instanceOf

, redux, ( ) .