Question

我开始使用Reactjs，并且来自OO（Java）背景我很好奇我们是否可以以真正的面向对象的方式使用React并具有真正的继承和组合。

USE CASE：我们正在库中创建React组件，供我们的开发人员重用。我们可以以面向对象的方式设计它吗？例如，我可以有一个通用的输入文本字段，带有一些基本的样式/行为，然后有另一个MyInput字段扩展Input，它能够利用Input的属性和行为吗？

似乎我所学习的大部分内容都使用了应用程序本身中的状态和缩减器来管理所有内容;对我来说，似乎它错过了OO设计的力量点。但也许我错了。任何信息都是最有帮助的

Answer 1

首先，我想告诉大家， React 基于 Javascript ，这显然是面向对象的（但与Java，C ++等语言不完全相似）和许多其他传统的面向对象语言）。

React本身并没有强制执行任何面向对象的技术 React组件完全可重用。您可以从非常简单的输入文本框，标签到复杂的文本框创建通用组件，并且可以多次重复使用。

如果您来自 JAVA 世界，那么我建议您使用 Javascript es6 以类似的方式品尝课程。

Javascript es6

中的示例React组件

android:maxLines = "2"
android:ellipsize = "end"

了解继承如何在这里工作

class Text extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

React.render(<Text>Hello World</Text>, document.body);

您看到的所有代码都是Javascript！

对于React，您可以将应用程序划分为演示组件和容器组件，以便更好地重复使用和构建。

演示组件： 主要关注通过道具接收数据并显示它们。它们没有指定数据如何加载或变异，也没有自己的状态。

示例

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

class CPoint extends Point {
    constructor(x, y, color) {
        super(x, y);
        this.color = color;
    }
    toString() {
        return super.toString() + ' in ' + this.color;
    }
}

容器组件： 将数据和行为传递给表示或其他容器组件。它们有自己的状态。您可以在此处生成数据并将其传递给表示组件。

示例

const Text = ({ children = 'Hello World!' }) => <p>{children}</p>

我建议远离Mixins。 ES6课程不支持Mixins。

Answer 2

可以创建mixins以在组件之间共享功能。继承力强大的组件耦合，从长远来看，这可能是相反的。

Reactjs - 面向对象？

2 个答案: