Question

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

class BaseComponent extends Component{

}

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

class Todo extends BaseComponent {

}

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

很遗憾，那里找不到任何文档。我不知道这是否是正确的概念。

Answer 1

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

以下是Composition vs Inheritance上官方文档的引文：

在Facebook，我们在成千上万的组件中使用React，但还没有发现建议创建组件继承层次结构的用例。

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

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

话虽如此，如果您仍然想偏离建议的方式，并拥有共享功能的基本组件，则可以。如果您（1）将基本功能降低为大多数子级所需的最小公分母（2），则您仍处于“安全方面”（即，很可能不会引起过多的混乱或麻烦）在基本组件中保留所有共享状态（3）在基本组件中进行not use arrow functions，如果您（4）确保将生命周期方法和connect保留在子组件中，以避免意外的行为。< / p>

按您的计划在基类中执行connect会遇到问题，因为connect返回一个新包装的组件，该组件充当您实际BaseComponent的owner （请参见how connect works）。因此，您将失去在ChildComponents中访问类方法的能力。另外，很可能还会发生其他不良情况，因为您现在可以在两个级别（子级和基础级）上独立注入和管理状态和生命周期。 –因此，使用自定义BaseComponent时，最好的选择是不要将connect放在父级中，而应由子级来处理连接。

值得一读的

Here is also a blog article by Dan Abramov讨论了react中的继承问题。他主要担心的是，多层次的层次结构更难重构，如果父类稍后添加具有某些子类已经使用的名称的方法，则会发生名称冲突，子与父方法之间的逻辑共享使代码的理解变得更加困难。总的来说，他建议依靠函数式编程风格。

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


如果您不继承两次且不使用super，则可以在JS中使用class。

尽可能将React组件写为纯函数。   如果需要状态或生命周期挂钩，请对组件使用ES6类。

在这种情况下，您只能直接扩展React.Component。   将您对功能状态建议的反馈意见反馈给React团队。

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

Answer 2

在React中，继承并不是广泛的首选和鼓励，因此您在网上没有太多关于此的文档。实现所需目标的更好方法是导出一个容器，然后将其作为HOC包装到要用作容器的任何组件

connectContainer.js

const mapStateToProps = state => {
   return {}; // return data you want from reducers
}

const mapDispatchToProps = {}; // define action creators you want to pass here

export default connect(mapStateToProps, mapDispatchToProps);

现在在您希望使用相同容器属性的任何组件中，都可以像使用它们一样

import connectHOC from './connectContainer';
class Todo extends React.Component {

}
export connectHOC(Todo);

React Redux和继承

2 个答案: