导出React组件最合理的方法是什么？

Question

在ES6中编写React组件时，我有时想知道导出组件最合乎逻辑的方式。 我找到了三种方法，我主要使用第一种：

导出默认类

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

似乎是最直接的方式。 我能看到的唯一缺点是除文件名外，组件没有在文件中明确命名。

导出默认类ComponentName

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

除了明确命名的类之外，似乎与上面几乎相同。 附带问题：导入组件时，上述两者之间是否存在差异？

具有单独导出的类

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

export default ComponentName

我认为这在编程上与其他两个例子相同，但我不确定。

使用这三个例子中的一个是否比其他例子有显着的好处？

Answer 1

您应该选择第三个选项，因为它更清洁以包装您的组件。 例：

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

export default connect(null)(ComponentName);

Answer 2

导出默认类

export default class extends Component { ... }

这个问题：

• 您将无法从类中引用该类 - 因此将无法访问其静态属性

• 您也将无法在此类之外定义此类的静态属性，这通常是您要对defaultProps和propTypes

• 如果类中的某些内容出现错误，则调试将更加困难，因为该类未命名，因此它不会显示在堆栈跟踪中

---

导出默认类ComponentName

export default class ComponentName extends Component { ... }

（这样做的好处：您可以避免上述所有问题，并且简洁明了。）

这个问题：

• 如果你想把你的组件包装在一个更高阶的函数中，比如使用Redux的连接，它会使类签名真的很长，这使得它很难阅读

---

具有单独导出的类

class ComponentName extends Component { ... }

export default ComponentName

这样做的好处：

• 你避免了上述所有问题

Answer 3

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

Answer 4

这些导出方法几乎完全相同。 我个人认为这取决于一致性（你想在整个应用程序中使用相同的方法），我更喜欢使用组件名称，因为我可以使用像instanceOf这样的东西

另外，如果我使用redux，我更喜欢使用connect的最后一个方法（单独的export语句）。