Uso de mixins vs componentes para la reutilización de código en Facebook React

Estoy empezando a usar Facebook React en un proyecto de Backbone y hasta ahora me va muy bien.
Sin embargo, noté algunas duplicaciones en mi código de React.

Por ejemplo, tengo varios widgets en forma de formulario con estados como INITIAL, SENDINGy SENT. Cuando se presiona un botón, el formulario debe validarse, se realiza una solicitud y luego se actualiza el estado. El estado se mantiene dentro de React, this.statepor supuesto, junto con los valores de campo.

Si estas fueran vistas de Backbone, habría extraído una clase base llamada, FormViewpero mi impresión fue que React no respalda ni admite subclases para compartir la lógica de la vista (corríjame si me equivoco).

He visto dos enfoques para la reutilización de código en React:

• Mixins (como LinkedStateMixin que se envía con React);
• Componentes del contenedor (como react-infinite-scroll ).

¿Tengo razón en que se prefieren los mixins y los contenedores a la herencia en React? ¿Es esta una decisión de diseño deliberada? ¿Tendría más sentido utilizar un componente mixin o contenedor para mi ejemplo de "widget de formulario" del segundo párrafo?

Aquí hay una esencia con FeedbackWidgety JoinWidgeten su estado actual . Tienen una estructura similar, un beginSendmétodo similar y ambos necesitarán algún soporte de validación (todavía no existe).

Actualización: esta respuesta está desactualizada. Manténgase alejado de los mixins si puede. ¡Te lo adverti!
Los mixins están muertos. Composición Larga Vida

Al principio, traté de usar subcomponentes para esto y extraer FormWidgety InputWidget. Sin embargo, abandoné este enfoque a la mitad porque quería un mejor control sobre los mensajes generados inputy su estado.

Dos artículos que más me ayudaron:

• Pensar en React me hizo darme cuenta de que en realidad no quiero componentes anidados para esto;
• Los componentes reutilizables tienen un buen ejemplo de mezcla.

Resultó que solo necesitaba escribir dos mixins (diferentes): ValidationMixiny FormMixin.
Así es como los separé.

ValidaciónMixin

Validation mixin agrega métodos convenientes para ejecutar sus funciones de validación en algunas de las propiedades de su estado y almacenar propiedades "con error" en una state.errorsmatriz para que pueda resaltar los campos correspondientes.

Fuente ( esencia )

define(function () {

  'use strict';

  var _ = require('underscore');

  var ValidationMixin = {
    getInitialState: function () {
      return {
        errors: []
      };
    },

    componentWillMount: function () {
      this.assertValidatorsDefined();
    },

    assertValidatorsDefined: function () {
      if (!this.validators) {
        throw new Error('ValidatorMixin requires this.validators to be defined on the component.');
      }

      _.each(_.keys(this.validators), function (key) {
        var validator = this.validators[key];

        if (!_.has(this.state, key)) {
          throw new Error('Key "' + key + '" is defined in this.validators but not present in initial state.');
        }

        if (!_.isFunction(validator)) {
          throw new Error('Validator for key "' + key + '" is not a function.');
        }
      }, this);
    },

    hasError: function (key) {
      return _.contains(this.state.errors, key);
    },

    resetError: function (key) {
      this.setState({
        'errors': _.without(this.state.errors, key)
      });
    },

    validate: function () {
      var errors = _.filter(_.keys(this.validators), function (key) {
        var validator = this.validators[key],
            value = this.state[key];

        return !validator(value);
      }, this);

      this.setState({
        'errors': errors
      });

      return _.isEmpty(errors);
    }
  };

  return ValidationMixin;

});

Uso

ValidationMixintiene tres métodos: validate, hasErrory resetError.
Espera que la clase defina el validatorsobjeto, similar a propTypes:

var JoinWidget = React.createClass({
  mixins: [React.addons.LinkedStateMixin, ValidationMixin, FormMixin],

  validators: {
    email: Misc.isValidEmail,
    name: function (name) {
      return name.length > 0;
    }
  },

  // ...

});

Cuando el usuario presiona el botón de envío, llamo validate. Una llamada a validateejecutará cada validador y se completará this.state.errorscon una matriz que contiene claves de las propiedades que fallaron en la validación.

En mi rendermétodo, utilizo hasErrorpara generar la clase CSS correcta para los campos. Cuando el usuario pone el foco dentro del campo, llamo resetErrorpara eliminar el resaltado de error hasta la próxima validatellamada.

renderInput: function (key, options) {
  var classSet = {
    'Form-control': true,
    'Form-control--error': this.hasError(key)
  };

  return (
    <input key={key}
           type={options.type}
           placeholder={options.placeholder}
           className={React.addons.classSet(classSet)}
           valueLink={this.linkState(key)}
           onFocus={_.partial(this.resetError, key)} />
  );
}

FormMixin

Form mixin maneja el estado del formulario (editable, envío, enviado). Puede usarlo para deshabilitar entradas y botones mientras se envía la solicitud, y para actualizar su vista en consecuencia cuando se envía.

Fuente ( esencia )

define(function () {

  'use strict';

  var _ = require('underscore');

  var EDITABLE_STATE = 'editable',
      SUBMITTING_STATE = 'submitting',
      SUBMITTED_STATE = 'submitted';

  var FormMixin = {
    getInitialState: function () {
      return {
        formState: EDITABLE_STATE
      };
    },

    componentDidMount: function () {
      if (!_.isFunction(this.sendRequest)) {
        throw new Error('To use FormMixin, you must implement sendRequest.');
      }
    },

    getFormState: function () {
      return this.state.formState;
    },

    setFormState: function (formState) {
      this.setState({
        formState: formState
      });
    },

    getFormError: function () {
      return this.state.formError;
    },

    setFormError: function (formError) {
      this.setState({
        formError: formError
      });
    },

    isFormEditable: function () {
      return this.getFormState() === EDITABLE_STATE;
    },

    isFormSubmitting: function () {
      return this.getFormState() === SUBMITTING_STATE;
    },

    isFormSubmitted: function () {
      return this.getFormState() === SUBMITTED_STATE;
    },

    submitForm: function () {
      if (!this.isFormEditable()) {
        throw new Error('Form can only be submitted when in editable state.');
      }

      this.setFormState(SUBMITTING_STATE);
      this.setFormError(undefined);

      this.sendRequest()
        .bind(this)
        .then(function () {
          this.setFormState(SUBMITTED_STATE);
        })
        .catch(function (err) {
          this.setFormState(EDITABLE_STATE);
          this.setFormError(err);
        })
        .done();
    }
  };

  return FormMixin;

});

Uso

Espera que el componente proporcione un método:, sendRequestque debería devolver una promesa Bluebird. (Es trivial modificarlo para que funcione con Q u otra biblioteca de promesas).

Proporciona métodos de conveniencia como isFormEditable, isFormSubmittingy isFormSubmitted. También proporciona un método para dar inicio a la solicitud: submitForm. Puede llamarlo desde el onClickcontrolador de botones de formulario .

Estoy construyendo un SPA con React (en producción desde 1 año) y casi nunca uso mixins.

El único caso de uso que tengo actualmente para mixins es cuando desea compartir un comportamiento que usa los métodos del ciclo de vida de React ( componentDidMountetc.). Este problema se resuelve con los componentes de orden superior que Dan Abramov habla en su enlace (o mediante el uso de la herencia de clases ES6).

Los mixins también se utilizan a menudo en marcos, para hacer que la API del marco esté disponible para todos los componentes, mediante el uso de la función de contexto "oculta" de React. Esto tampoco será necesario con la herencia de clases ES6.

La mayoría de las otras veces, se usan mixins, pero en realidad no son necesarios y podrían reemplazarse más fácilmente con ayudantes simples.

Por ejemplo:

var WithLink = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});

Puede refactorizar muy fácilmente el LinkedStateMixincódigo para que la sintaxis sea:

var WithLink = React.createClass({
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={LinkState(this,'message')} />;
  }
});

¿Existe alguna gran diferencia?