React Redux 和继承

Question

我真的很想知道为什么 Redux 没有任何内容以及如何处理继承。如果我有一个基本组件：

class BaseComponent extends Component{

}

然后所有其他组件都在扩展BaseComponent：

class Todo extends BaseComponent {

}

我想简单地将BaseComponent它连接到它自己的减速器，以便扩展它的每个其他组件也可以访问相同的道具和状态。

不幸的是找不到任何文档。我不知道这是否是一个正确的概念。

Answer 1

使用 react，您通常不会进一步继承您自己的组件。

以下是来自Composition vs Inheritance官方文档的引述：

在 Facebook，我们在数以千计的组件中使用 React，我们还没有发现任何我们建议创建组件继承层次结构的用例。

道具和组合为您提供了以明确和安全的方式自定义组件外观和行为所需的所有灵活性。请记住，组件可以接受任意道具，包括原始值、React 元素或函数。

如果您想在组件之间重用非 UI 功能，我们建议将其提取到单独的 JavaScript 模块中。组件可以导入它并使用该函数、对象或类，而无需扩展它。

话虽如此，如果您仍然想偏离推荐的方式并拥有共享功能的基础组件，这是可能的。如果您 (1) 将基础中的功能减少到大多数子项所需的最小公分母 (2) 不在您的基础组件中保留任何共享状态 (3) 不要在您的基础组件中使用箭头函数，并且如果您 (4) 确保保留您的生命周期方法和connect您的子组件以避免意外行为。

connect在您计划执行的基类中执行 a会出现问题，因为connect返回一个新包装的组件，该组件充当您的实际 BaseComponent的所有者（请参阅connect 的工作原理）。因此，您将无法访问 ChildComponents 中的类方法。此外，很可能会发生其他不好的事情，因为您现在在两个级别（子级和基级）上独立注入和管理状态和生命周期。– 因此，当使用自定义 BaseComponent 时，最好的办法是不要放入connect父组件，而是让子组件处理连接。

这里也是 Dan Abramov 的一篇值得一读的博客文章，讨论了React 中的继承问题。他主要担心的是多级层次结构更难重构，如果父类稍后添加一些子类已经使用的名称的方法，则会出现名称冲突，子方法和父方法之间的共享逻辑使代码更难以理解。总的来说，他建议依靠函数式编程风格。

那么我对 React 组件有什么建议呢？

• 如果您不继承两次并且不使用 super，则可以在您的 JS 中使用 class。
• 尽可能将 React 组件编写为纯函数。如果您需要状态或生命周期挂钩，请为组件使用 ES6 类。
• 在这种情况下，您只能直接扩展 React.Component。就功能状态提案向 React 团队提供反馈。

一般来说，OOP 编程中的层次结构是否良好是一个备受争议的领域。