导出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，我更喜欢使用最后一个方法（单独的export语句）来使用connect。