Использование миксинов и компонентов для повторного использования кода в Facebook React

Я начинаю использовать Facebook React в проекте Backbone, и пока все идет очень хорошо.
Однако я заметил, что в мой код React закрадывается некоторое дублирование.

Например, у меня есть несколько виджетов, похожих на формы, с такими состояниями, как INITIAL, SENDINGи SENT. Когда кнопка нажата, необходимо проверить форму, сделать запрос, а затем обновить состояние. Состояние, this.stateконечно же, сохраняется в React вместе со значениями полей.

Если бы это были представления Backbone, я бы извлек базовый класс, называемый, FormViewно у меня сложилось впечатление, что React не поддерживает и не поддерживает подклассы для совместного использования логики представления (поправьте меня, если я ошибаюсь).

Я видел два подхода к повторному использованию кода в React:

• Миксины (например, LinkedStateMixin , поставляемый с React);
• Компоненты контейнера (например, react-infinite-scroll ).

Правильно ли я, что миксины и контейнеры предпочтительнее наследования в React? Это осознанное дизайнерское решение? Было бы лучше использовать миксин или компонент-контейнер для моего примера «виджета формы» из второго абзаца?

Вот суть FeedbackWidgetи JoinWidgetв их текущем состоянии . У них схожая структура, аналогичный beginSendметод, и обоим потребуется некоторая поддержка валидации (пока еще нет).

Обновление: этот ответ устарел. По возможности держитесь подальше от миксинов. Я предупреждал тебя!
Миксины мертвы. Да здравствует композиция

Сначала я пробовал использовать для этого подкомпоненты и извлекать FormWidgetи InputWidget. Однако я отказался от этого подхода на полпути, потому что хотел лучше контролировать сгенерированные inputs и их состояние.

Две статьи, которые мне больше всего помогли:

• Думая о React, я понял, что на самом деле мне не нужны для этого вложенные компоненты;
• У Reusable Components есть отличный пример миксина.

Оказалось, что мне нужно было написать всего два (разных) миксина: ValidationMixinи FormMixin.
Вот как я их разделил.

ValidationMixin

Миксин валидации добавляет удобные методы для запуска ваших функций валидатора для некоторых свойств вашего состояния и сохранения свойств с ошибками в state.errorsмассиве, чтобы вы могли выделить соответствующие поля.

Источник ( суть )

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;

});

использование

ValidationMixinимеет три метода: validate, hasErrorи resetError.
Он ожидает, что класс определит validatorsобъект, аналогично propTypes:

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

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

  // ...

});

Когда пользователь нажимает кнопку отправки, я звоню validate. Вызов validateбудет запускать каждый валидатор и заполнять this.state.errorsего массивом, содержащим ключи свойств, которые не прошли проверку.

В своем renderметоде я использую hasErrorдля создания правильного класса CSS для полей. Когда пользователь помещает фокус внутри поля, я призываю resetErrorубрать выделение ошибки до следующего validateвызова.

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

Примесь формы обрабатывает состояние формы (редактируется, отправляется, отправлено). Вы можете использовать его для отключения ввода и кнопок во время отправки запроса и для обновления вашего представления при его отправке.

Источник ( суть )

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;

});

использование

Он ожидает, что компонент предоставит один метод:, sendRequestкоторый должен вернуть обещание Bluebird. (Его легко изменить для работы с Q или другой библиотекой обещаний.)

Он предоставляет удобные методы, такие как isFormEditable, isFormSubmittingи isFormSubmitted. Она также обеспечивает способ пнуть запрос: submitForm. Вызвать его можно из onClickобработчика кнопок формы .

Я создаю SPA с React (в производстве уже 1 год) и почти никогда не использую миксины.

Единственный вариант использования миксинов, который у меня сейчас есть, - это когда вы хотите поделиться поведением, которое использует методы жизненного цикла React (и componentDidMountт. Д.). Эта проблема решается Компонентами высшего порядка, о которых Дэн Абрамов говорит в своей ссылке. (или с помощью наследования классов ES6).

Миксины также часто используются во фреймворках, чтобы сделать API фреймворка доступным для всех компонентов с помощью «скрытой» контекстной функции React. Это больше не понадобится и с наследованием классов ES6.

В большинстве случаев используются миксины, но они на самом деле не нужны, и их можно было бы проще заменить простыми помощниками.

Например:

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

Вы можете очень легко реорганизовать LinkedStateMixinкод так, чтобы синтаксис был таким:

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

Есть большая разница?