Reactjs - Orienté Objet?

Tout d'abord, je tiens à vous dire que Réagir est basé sur Javascript qui est évidemment orientée objet(mais pas exactement semblable à des langages comme Java, C++, et de nombreux autres traditionnelles langages Orientés Objet
).

Réagir lui-même n'a pas applique tout orientée objet technique, mais
Réagir les composants sont totalement réutilisable. Vous pouvez créer des composants génériques à partir d'une entrée très simple zone de texte, étiquettes complexe et peut être réutilisé de nombreuses fois.

Si vous venez de JAVA monde alors je vous suggère d'utiliser Javascript es6 pour obtenir le goût de la classe dans un peu de la même manière.

Un échantillon de Réagir composant dans Javascript es6

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

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

Voir comment héritage travaille ici

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

Tous les code que vous voyez est en Javascript!

Pour Réagir, vous pouvez diviser votre demande de Présentation des composants et Conteneur de composants pour mieux ré-utilisabilité et de structuration.

• Présentation des composants :
  principalement concerné par la réception de données par le biais d'accessoires et de les afficher. Ils ne précisent pas comment les données sont chargées ou muté et ne disposent pas de leurs propres états.

Exemple

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

• Conteneur de composants:
  transmet les données et le comportement, à la présentation ou à d'autres composants conteneurs. Ils ont leurs propres états.Vous pouvez générer les données et le transmettre à la présentation des composants.

Exemple

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

Je suggère de rester à l'écart de Mixin.
Mixin ne sont pas pris en charge dans l'ES6 classes.

OriginalL'auteur WitVault