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 a component. I have found three ways to do so, and I mostly employ the first one:

export default class

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

Seems to the most straightforward way. The only downside I can see is that the component is not explicitly named in the file except for the filename.

export default class ComponentName

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

Seems to be practically the same as above, apart from the class being named explicitly. Side question: Is there a difference between the two above when importing the component?

class with separate export

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

export default ComponentName

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

Does employing one of these three examples have a notable benefit over the others?

Answer 1

You should pick the third option since it's cleaner to wrap your component. Example:

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

export default connect(null)(ComponentName);

Answer 2

export default class

export default class extends Component { ... }

Problems with this:

• You won't be able to refer to the class from within the class - so won't be able to access its static properties

• You also won't be able to define static properties on this class from outside of it which is often what you want to do with defaultProps and propTypes

• In case something within the class errors it will be harder to debug because the class is unnamed so it won't show up in the stack traces

---

export default class ComponentName

export default class ComponentName extends Component { ... }

( Benefits of this: You avoid all of the above problems and it's short and concise. )

Problems with this:

• If you want to wrap your component in a Higher Order Function such as with Redux's connect it can make the class signature really long making it hard to read

---

class with separate export

class ComponentName extends Component { ... }

export default ComponentName

Benefits of this:

• You avoid all of the above problems

Answer 3

我使用带有单独导出的类，因为它对我来说感觉更干净，特别是当你需要使用redux connect，material-ui样式和许多库包装你的组件时。

Answer 4

These export methods do pretty much the same thing all around. I personally think it comes down to consistency (you want to use the same method throughout your app) and I prefer using component names as I can then use things like instanceOf

Also if I am using redux I prefer the last method (separate export statement) to use connect.