Вариант использования для компонентов высшего порядка в React? - PullRequest
Новая
       58

Вариант использования для компонентов высшего порядка в React?

0 голосов
/ 08 июня 2018

В туториале о component composition на официальном сайте response.js описано, как использовать композицию, чтобы избежать наследования, и по большей части я вижу здесь преимущество.
Но на сайте также упоминается we haven’t found any use cases where we would recommend creating component inheritance hierarchies
src:https://reactjs.org/docs/composition-vs-inheritance.html

Но тогда у нас есть учебник о шаблоне HOC (компонент высшего порядка)
src: https://reactjs.org/docs/higher-order-components.html
, который предлагает написание функций для генерации составных компонентов в качестве средства дляизбегайте дублирования логики.
Этот шаблон также используется в Relay для компонентов, работающих с GraphQL.

Для тех, кто происходит из C # / Java / PHP, их сценарии использования HOC выглядят следующим образомочевидные примеры того, когда использовать наследование.Это то, что я делал ранее в React и считаю его очень интуитивным и, что более важно, простым для отладки.

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

Итак, мой вопрос: Есть ли вариант использования для HOC в React, который нельзя было бы так же легко решить ни составом, ни наследованием?

Примеры приветствуются.

Обновление: Нашел эту статью о Inheritance Inversion, в которой предлагается, чтобы ваш класс-оболочка наследовался от вашеговнутренний класс и вызов его метода render ().
Я могу быть предвзятым, поэтому я не буду сразу отказываться от этой идеи, поскольку она может иметь практическое применение, но сначала мне придется изучить ее подробнее.
Если у вас естьидею о том, когда это может превзойти обычную композицию или наследование, пожалуйста, оставьте комментарий или, возможно, ответ, если вы считаете, что у вас хороший случай.

1 Ответ

0 голосов
/ 10 июня 2018

Для тех, кто пришел из любого Объектно-ориентированного языка , например Java , важно учитывать, что Javascript является основанным на прототипе язык означает, что свойства и методы объекта могут совместно использоваться обобщенными объектами, которые могут быть клонированы и расширены.Это известно как прототипное наследование и отличается от наследование класса .В Javascript слишком много наследования может привести к бесконечной путанице и бесконечной боли, когда вы пытаетесь отладить такой код и также влиять на производительность, поэтому, если вы читаете статью в Facebook

В Facebook мы используем React в тысячах компонентов, и мы не нашли ни одного варианта использования, в котором мы бы рекомендовали создавать иерархии наследования компонентов

Сказав это, мы не должны смешивать концепцию двух разных шаблонов, таких как HOC и Composition .Они имеют разные варианты использования.

A компонент высшего порядка (HOC) - это усовершенствованный метод React для повторного использования логики компонентов.Читая в примере:

может показаться, что шаблон используется как очевидные примеры использования наследования, но это не так.Логика, вовлеченная в HOC, не только в этом.

Некоторые примеры

  • React-Redux использует HOC с именем connect для отображения хранилищаstate to props
  • React-Router withRouter HOC предоставляет контекст маршрута для компонентов, нуждающихся в доступе к API истории

Есть ли сценарий использованиядля HOC в React, который не может быть так же легко решен ни по составу, либо по наследству?

Я бы сказал, что всегда избегайте наследования, и исходя из ваших потребностей, вы должны либо набрать Composition или HOC , принимая во внимание, что если вы выберете Composition , вы должны хотя бы попробовать следующие общие правила, такие как:

  • Разделите компоненты на stateful “Составные »и« не имеющие состояния «Компоненты».
  • Если два компонента нуждаются в доступе к одному и тому же состоянию, переместите состояние в их общий родительский элемент.https://reactjs.org/docs/lifting-state-up.html

Пример: 

class Composed extends React.Component {
      state = { 
         value: 'foo'
      }
      changeValue = value => this.setState({value})
      render() {
            <div>
              <Component1 value={this.state.value} changeValue={this.changeValue} />
              <Component2 value={this.state.value} />
            <div>
      }
}

Надеюсь, что помог.

...