Reactjs - 面向对象？

Question

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

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

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

Answer 1

首先,我想告诉你,React基于Javascript,它显然是面向对象的(但与Java,C++和许多其他传统的面向对象语言等语言并不完全相似).

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

如果你来自JAVA世界,那么我建议你使用Javascript es6以类似的方式获得课程的味道.

Javascript es6中的示例React组件

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

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

了解继承在这里是如何工作的

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;
    }
}

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

对于React,您可以将应用程序划分为具有 演示组件和容器组件,以实现更好的可重用性和结构化.

• 演示组件: 主要涉及通过道具接收数据并显示它们.它们没有指定数据如何加载或变异,也没有自己的状态.

例

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

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

例

class Contacts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
          message:"new message"
    };
  }
  render() {
    return (
      <div><Text children={this.state.message}/></div>
    );
  }
}

我建议远离Mixins. ES6类不支持Mixins.

Answer 2

可以创建mixins以在组件之间共享功能。继承迫使组件紧密耦合，从长远来看，这可能会适得其反。