javascript - 导出 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

export default class

export default class extends Component { ... }

问题:

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

• 您也无法从该类的外部定义该类的静态属性，这通常是您希望使用 defaultProps 和 propTypes 进行的操作

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

---

export default class ComponentName

export default class ComponentName extends Component { ... }

(这样做的好处:您可以避免上述所有问题，而且它简短明了。)

问题:

• 如果您想将组件包装在高阶函数中，例如使用 Redux 的连接，它会使类签名变得非常长，难以阅读

---

class with separate export

class ComponentName extends Component { ... }

export default ComponentName

这样做的好处:

• 您避免了上述所有问题