Una de las cosas que aprecio de la mayoría sobre Backbone.js es lo simple y elegante funciona la herencia. Estoy empezando a familiarizarse con el Reaccionar, y realmente no puede encontrar nada en reaccionar que se asemeja a esta columna vertebral código

var Vehicle = Backbone.View.extend({
    methodA: function() { //... }
    methodB: function() { //... }
    methodC: function() { //... }
});

var Airplane = Vehicle.extend({
    methodC: function() {
        //Overwrite methodC from super
    }
});

En reaccionar nos han mixins, y el uso de esas podríamos conseguir algo cercano al ejemplo de arriba, si nos fue como este

var vehicleMethods = {
    methodA: function() { //... }
    methodB: function() { //... }
}

var Vehicle = React.createClass({
    mixins: [vehicleMethods]
    methodC: function() { 
        //Define method C for vehicle
    }
});

var Airplane = React.createClass({
    mixins: [vehicleMethods]
    methodC: function() {
        //Define method C again for airplane
    }
});

Esto es menos repetitivo que la definición de las mismas cosas una y otra vez, pero no parece ser casi tan flexible como la columna vertebral manera. Por ejemplo, me sale un error si intenta redefinir/sobrescribir un método que existe en uno de mis mixins. En la parte superior de que, el React.js manera es más código para mí escribir.

Hay algunos increíblemente cosas inteligentes en reaccionar, y se siente como esto es más el caso de que no me conseguir la forma adecuada de hacer esto, que se siente como una característica falta de Reaccionar.

Los punteros son muy apreciados.

  • Me parece la siguiente composición enfoque muy interesante. Es un movimiento lejos de vainilla mixins: medium.com/@dan_abramov/…
  • Sería agradable si lo que el Reaccionar de la comunidad decida utilizar para la encapsulación/reutilización de código sería independiente de la de Reaccionar marco. Así que podría ser utilizado fuera de Reaccionar, y para que haya más posibilidades de elección dentro de Reaccionar. Abajo con monolitos!
InformationsquelleAutor Ahrengot | 2014-09-08

4 Comentarios

  1. 59

    Para conseguir algo que se asemeja a la herencia (en realidad composición como se señaló en los comentarios), usted puede hacer un Airplane en su ejemplo, envuelva en un Vehicle. Si desea exponer a los métodos de Vehicle en el Airplane componente, puede utilizar una ref y conectar con ellos uno por uno. Esto no es exactamente la herencia (que es en realidad composición), sobre todo porque la this.refs.vehicle no será accesible hasta después de que el componente se ha montado.

    var Vehicle = React.createClass({
        ...
    });
    
    var Airplane = React.createClass({
        methodA: function() {
          if (this.refs != null) return this.refs.vehicle.methodA();
        },
        ...
        render: function() {
            return (
                <Vehicle ref="vehicle">
                    <h1>J/K I'm an airplane</h1>
                </Vehicle>
            );
        }
    });

    También vale la pena mencionar que en el Reaccionar documentación oficial prefieren composición a lo largo de la herencia:

    Entonces, ¿Qué Acerca De La Herencia? En Facebook, utilizamos Reaccionar en miles de
    componentes, y no hemos encontrado casos de uso donde nos
    se recomienda crear componente de las jerarquías de herencia.

    Los apoyos y la composición de darle toda la flexibilidad que usted necesita para
    personalizar un componente de la apariencia y el comportamiento en una explícita y de manera segura.
    Recuerde que los componentes pueden aceptar arbitraria accesorios, incluyendo
    valores primitivos, Reaccionar elementos o funciones.

    Si quieres volver a usar no-interfaz de usuario de la funcionalidad entre los componentes, se
    sugieren que la extracción en un JavaScript independiente del módulo. El
    los componentes pueden importar y utilizar esa función, objeto, o de una clase,
    sin extenderlo.

    Otra cosa que vale la pena mencionar que el uso de ES2015/ES6+ usted también puede transmitir el objeto de accesorios de Airplane componente a la Vehicle componente

    render: function() {
        return (
            <Vehicle {...this.props}>
                <h1>J/K I'm an airplane</h1>
            </Vehicle>
        );
    }
    • La composición, como la que tenemos aquí, es en general el enfoque que sugerimos. Voy a añadir, que cuando usted hace esto, puede que ni siquiera necesita los métodos que usted piensa que usted puede ser que necesite y se puede comunicar más a través de los apoyos y la representación.
    • Gracias, @PaulO’Shannessy. He añadido una nota que esto es en realidad la composición.
    • Esto está muy bien, a menos que quiera ajustar y ampliar los métodos como #componentWillMount(), que son llamados en un momento en refs no está disponible todavía.
    • A continuación alguien ha sugerido el uso de reactto. Pero supongo que esta respuesta es la más adecuada ya que las cosas en Reaccionar mejor debe ser hecho Reaccionar de forma. Sí, el estilo de la composición de Reaccionar hace aquí más sentido.
    • Creo que el hecho de que esta respuesta se utiliza la elipsis es exactamente la elisión que veo en el argumento para la composición. Estás dejando fuera a una gran cantidad de texto repetitivo. Cómo es una solución mejor que la original en caso de que lo que puede ser considerado «correcto»?
    • Creo que Si mi baseComponent es abstracta, no quiero hacerla. Este caso no va a obtener el baseComponent del ref y no puede acceder a baseComponent métodos.

  2. 5

    Si utiliza webpack+babel+reaccionan MECANISMO nacional de prevención de paquete en su proyecto, luego en ES6 programación orientada a objetos la aplicación debe ser tan simple como esto:

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    
    class BaseComponentClass extends Component {
      componentDidMount() {} 
      render() { return (<div>Base Component</div>) }
    }
    class InheritedComponentClass extends BaseComponentClass {
      //componentDidMount is inherited
      render() { return (<div>Inherited Component</div>) } // render is overridden 
    }
    ReactDOM.render(<InheritedComponentClass></InheritedComponentClass>, 
         document.getElementById('InheritedComponentClassHolder'));

    Nota: Aquí es un simple kit de inicio con tal de configurar: https://github.com/alicoding/react-webpack-babel

    • Cuidado con esto. Pueden surgir problemas por la carretera desde Reaccionar recomienda el uso de la composición a lo largo de la herencia. Yo lo hice y tuve que revertir este enfoque mediados de proyecto. No fue divertido.
    • Muy interesante, y , efectivamente, el Reaccionar docs decir exactamente que: «En el Facebook, utilizamos Reaccionar en miles de componentes, y no hemos encontrado casos de uso que le recomendamos crear componente de las jerarquías de herencia… Si desea volver a utilizar la no-funcionalidad de la IU entre los componentes, sugerimos la extracción en un JavaScript independiente del módulo. Los componentes puede importar y utilizar esa función, objeto, o de una clase, sin extenderlo.» [emph mina] Un class incompatible mentalidad, parece.
    • He creado una demo para mostrar este patrón y cómo los métodos que se sobrescriben! codesandbox.io/s/niza-robinson-8lk4y
  3. 3

    Aprovechando ReactOO, usted puede fácilmente hacer uso de la herencia (Descargo de responsabilidad: soy el autor de ReactOO):

    JS:

    (function () {
    
        //Class definitions. ReactOO requires class definition first just like you did in an OO way.
    
        window.Vehicle = window.ReactOO.ReactBase.extend({
            getReactDisplayName: function () {
                return 'Vehicle';
            },
    
            onReactRender: function (reactInstance) {
                var self = this;
    
                var text = self.methodC();
    
                return React.createElement('div', {}, text);
            },
    
            methodA: function () {
                console.log('Vehicle method A');
            },
    
            methodB: function () {
                console.log('Vehicle method B');
            },
    
            methodC: function () {
                return 'Vehicle method C';
            }
        });
    
        window.Airplane = window.Vehicle.extend({
            getReactDisplayName: function () {
                return 'Airplane';
            },
    
            methodC: function () {
                //Call this._super() to execute parent method.
                //this._super();
                return 'Airplane method C';
            }
        });
    
        var vehicle = new window.Vehicle();
        vehicle.render({}, '#vehicle');
    
        var airPlane = new window.Airplane();
        airPlane.render({}, '#airPlane');
    })();

    HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>ReactOO Vehicle-Aireplane Example</title>
        <link rel="stylesheet" href="css/base.css" />
        <script src="scripts/react.js"></script>
        <script src="scripts/react-dom.js"></script>
        <script src="../src/reactoo.js"></script>
    </head>
    <body>
        <div id="vehicle">
        </div>
        <div id="airPlane">
        </div>
        <script src="scripts/vehicleAirplane.js">
        </script>
    </body>
    </html>

    Ampliación de React.js componentes

  4. -4

    Creo que la ampliación se puede hacer con el uso de jQuery.extend o similar

    Base.jsx

    module.exports = {
        methodA:function(){
            ...
        }
    }

    Niño.jsx

    var Base = require('./Base.jsx');
    
    module.exports = React.createClass($.extend({},Base,{
        methodB:function(){
            ...
            this.methodA();
            ...
        },
        render:function(){
            return ...
        }
    }));

Dejar respuesta

Please enter your comment!
Please enter your name here