Reactjs - Objekt-Orientiert?

Zunächst möchte ich Ihnen sagen, dass Reagieren basiert auf Javascript das ist natürlich von Objekt-orientierten(aber nicht genau die gleichen Sprachen wie Java, C++ und vielen anderen traditionellen und objektorientierten Sprachen
).

Reagieren, sich nicht durchsetzt, alle Objekt-orientierten Technik, aber
React-Komponenten sind vollständig wiederverwendbar. Sie können erstellen von generischen Komponenten von sehr einfachen input-text-Feld, Etiketten zu Komplex und können viele Male wiederverwendet werden.

Kommen Sie aus JAVA Welt, dann würde ich vorschlagen, Sie verwenden Javascript es6 zu bekommen-Geschmack, Klasse in etwas ähnlicher Weise.

Einer Probe Reagieren Komponente in Javascript es6

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

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

Sehen, wie Vererbung ist, hier zu arbeiten

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

Alle code, den Sie sehen, ist in Javascript!

Für Reagieren Sie können die Aufteilung der Anwendung zu haben Präsentations-Komponenten und Container-Komponenten für eine bessere Wiederverwendbarkeit und Strukturierung.

• Präsentations-Komponenten :
  vor allem mit dem Erhalt der Daten über die Requisiten und die Anzeige. Sie nicht anzugeben, wie die Daten geladen oder mutiert und nicht über Ihren eigenen Staaten.

Beispiel

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

• Container-Komponenten:
  übergibt die Daten und das Verhalten zu Präsentations-oder andere container-Komponenten. Sie haben Ihre eigenen Staaten.Generieren Sie die Daten hier ein und übergeben es an die Layout-Komponenten.

Beispiel

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

Ich würde vorschlagen, bleiben Weg von Mixins in Verbindung.
Mixins in Verbindung werden nicht unterstützt in ES6-Klassen.