Как грамотно использовать компзицию вместо наследования?

Question

[Tweedledum]

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

Мой вопрос, - в статье описано более менее стандартное решение, или эта функция должна быть в каждом отдельном случае своя? Может есть еще какие-нибудь толковые примеры/статьи реализации компзиции?

Comments

[Tweedledum]

Антон Спирин, мой вопрос скорее не по конкретному коду, а где можно посмотреть реализации композиций. 90% всего найденного оперирует примитивными примерами, которые не проясняют картину ничуть :(

[Антон Спирин]

Tweedledum, ну композиция это фундаментальный прием. Изучайте фундаментальную литературу по проектированию.
Статья по ссылке про HOC. Это немного другое, но, возможно, может решить вашу задачу.
А пример вашего кода помог бы показать как решаются подобные проблемы. В зависимости от условий могут быть разные пути решения.

[Петр Мухуров]

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

Answer 1

[Андрей К]

Что-то Вы вообще не о том.

Смысл в том, что у нас есть общая логика, есть два варианта, вынести ее в базовый класс и наследоваться от него или сделать общий класс и сделать полем во всех остальных классах, где это нам нужно.

Недостаток первого варианта в том, что тяжело вносить изменения в будущем, особенно, если мы не контролирует все реализации нашего класса. Если мы хотим добавить метод или поле в базовый класс, то оно может конфликтовать с именем в классе наследнике и может все поломать. При композиции, естественно, такой проблемы нету.

Поэтому, рекомендуется использовать композицию, вместо наследования.

Ваш пример с React - это вообще не то. Даже тяжело представить как и зачем туда запихнуть наследование.

Answer 2

[Mikhail Osher]

Что, скорее всего, происходит. Компонент-наследник дёргает какой-то API компонента-родителя.
Вот это "переиспользуемую" часть выносите отдельно и имплементируете render props.

Супер вымышленный пример, но надеюсь посыл поняли.

// inheritance

class UrlLoader extends React.Component {
  state = {
    loading: false,
    result: null,
    error: null,
  };

  componentDidMount() {
    this.setState({
      loading: true,
    });

    this.load().then(
      (result) => {
        this.setState({
          result,
          loading: false,
        });
      },
      (error) => {
        this.setState({
          error,
          loading: false,
        });
      },
    );
  }

  load() {
    return fetch(this.props.url);
  }

  render() {
    const { loading, error, result } = this.state;

    if (loading) {
      return 'Loading...';
    }

    if (error) {
      return (
        <div className="error">
          {error}
        </div>
      );
    }

    return (
      <div className="page-result">
        {result}
      </div>
    );
  }
}

class FancyUrlLoader extends UrlLoader {
  componentDidMount() {
    super.componentDidMount();

    this.doSomethingElse();
  }

  doSomethingElse() {
    // something else
  }

  render() {
    const result = super.render();

    return (
      <div className="super-fancy">
        {result}
      </div>
    );
  }
}

// somewhere
const MyComponent = () => {
  return (
    <div>
      <FancyUrlLoader url="https://google.com" />
    </div>
  );
};

// composition

class UrlLoader extends React.Component {
  state = {
    loading: false,
    result: null,
    error: null,
  };

  componentDidMount() {
    this.setState({
      loading: true,
    });

    this.load().then(
      (result) => {
        this.setState({
          result,
          loading: false,
        });
      },
      (error) => {
        this.setState({
          error,
          loading: false,
        });
      },
    );
  }

  load() {
    return fetch(this.props.url);
  }

  render() {
    const { loading, error, result } = this.state;

    let render;

    if (loading) {
      render = 'Loading...';
    } else if (error) {
      render = (
        <div className="error">
          {error}
        </div>
      );
    } else {
      render = (
        <div className="page-result">
          {result}
        </div>
      );
    }

    return this.props.children(render);
  }
}

class FancyMaker extends React.Component {
  componentDidMount() {
    this.doSomethingElse();
  }

  doSomethingElse() {
    // something else
  }

  render() {
    return (
      <div className="super-fancy">
        {this.props.children}
      </div>
    );
  }
}

// somewhere
const MyComponent = () => {
  return (
    <div>
      <UrlLoader url="https://google.com">
        {(children) => (
          <FancyMaker>
            {children}
          </FancyMaker>
        )}
      </UrlLoader>
    </div>
  );
};

Comments

[Tweedledum]

Спасибо за этот пример, это именно то что я искал! До сих пор было более-менее понятно что делать с разными методами, и с одинаковыми из родителя, а вот с такими комбинированными что-то я повис. Выглядит интересно, надо это все теперь осознать :)

[Tweedledum]

не очень правда понятно что значит return this.props.children(render);

[Mikhail Osher]

Tweedledum, документацию читали хоть, прежде чем на React писать? :D
https://reactjs.org/docs/render-props.html

[Tweedledum]

Mikhail Osher, ээээ, ну не скажу что у меня очень большой опыт, но children ведь ни разу не функция

[Mikhail Osher]

Tweedledum, children - это то, что Вы туда передаёте. Передали элемент - будет элемент, передали функцию - будет функция.

[Tweedledum]

Mikhail Osher, мой вопрос был о том - что то как вы это написали - оно работать не будет this.props.children(render), вот специально сейчас набил похожий пример, как я и предполагал -TypeError: this.props.children is not a function

[Mikhail Osher]

Tweedledum, всё оно будет работать. учите матчасть https://codesandbox.io/embed/elastic-clarke-tuu00

[Tweedledum]

Mikhail Osher, теперь оно работает, а в первом примере нет. Может там чегото не хватает, ну так и говорите - типа псевдокод, все дела.
И вообще это с моей точки зрения не очень корректно попрекать собеседника через каждое слово не знанием "матчасти". Я потому вопросы и задаю, что пока многого не понимаю. Ну разве что вы себя от этого лучше чувствуете.

[Mikhail Osher]

Tweedledum, в том то и дело, что не псевдокод)

[Tweedledum]

Mikhail Osher, я не оставляю попыток разобраться :)
изначально в примере у нас есть два класса UrlLoader и наследник FancyUrlLoader. Такая структура предполагает, что оба класса могут быть использованы в коде. Теперь мы переписали их в два независимых класса UrlLoader и FancyMaker. Если вызвать FancyMaker как в примере, у меня все ок, но если вызвать просто UrlLoader, то я получаю ошибку что children не функция, потому что UrlLoader (в прошлом класс родитель) вызывается без указания children.

[Mikhail Osher]

Tweedledum, верно, ибо код рассчитан на то, что будет использоваться, как renderprops. Для гибкости можно написать if (typeof this.props.children === 'function') ... else ...