Рубрики
Без рубрики

Усиление компонентов реагирования: наследование и композиция

Есть пара способов улучшения компонентов реагирования: наследство и состав. Давайте понять обе концепции с примерами в этом руководстве.

Автор оригинала: Bhargav.

Компоненты React React – это весело, но это может быть утомительно!

Один взгляд на Материал-ui Скажут нам, как красивые компоненты могут быть построены в реакции. Составные компоненты очень просты в реакции, потому что хорошо, Компоненты Это USP of React, и Facebook сделала все в своей власти, чтобы сделать строительные компоненты легкими. Однако хорошо, есть все еще проблемы.

Большинство веб-страниц нужны различные стили одного компонента. Например, кнопка в одном компоненте красная цвета, а в другом, она синяя с черной границей. Бар навигации выглядит полной шириной на рабочем столе, но в мобильных телефонах. Компоненты, которые настолько похожи, но разные. В конечном итоге мы написали две кнопки и два навкара каждый раз?

Нет! Там должен быть другой способ. Каковы некоторые способы написать меньше кода и более гибкие компоненты?

Есть пара способов улучшения комментариев реагирования.

  1. Наследование
  2. Состав

Теперь понимание плюсов и минусов обеих техник выходит за рамки этого урока. Тем не менее, это видео служит хорошим фоном для того, что эти 2 метода и как они составляют друг против друга.

Наследование в реакции (или простых классов JavaScript)

Наследование – это концепция в JavaScript, которая позволяет одному классу наследовать свойства другого класса для дублирования поведения и добавить больше функций. Например, Этикетка Компонент может быть продлен в УСПЕКСАБЕЛЬ С двумя дополнительными свойствами Фон: зеленый и Цвет: белый Отказ

Точно так же ErrorLabel может быть продлен от Этикетка С собственными дополнительными свойствами, такими как Цвет: красный и так далее и тому подобное.

Но нижняя линия наследования заключается в том, что УСПЕКСАБЕЛЬ экземпляр это этикетка и наследует поведение Этикетка пример.

Кроме того, УСПЕКСАБЕЛЬ Может быть дополнительно расширен, чтобы создать еще более усовершенствованный класс, и этот процесс может пойти дальше уровень глубокой. Независимо от того, сколько уровней глубоки мы идем, полученный экземпляр все равно будет иметь все поведение Этикетка внутри этого и Instanceof Оператор вернет правда При использовании с УСПЕКСАБЕЛЬ экземпляр против Этикетка класс.

Хорошо, так как мы будем использовать наследство с комментариями React?

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

CSS.

html,body{
  padding: 20px;
}
h3{
  margin : 40px 0 20px;
}
hr{
  border-color : transparent;
  margin : 10px;
}
.plain-label{
  font-size: 16px;
  background : #f5f5f5;
  border: 1px solid #333;
  padding: 4px 8px;
}
.success-label{
  background : green;
  color : white;
}

.error-label{
  background : red;
  color : white;
}

Чтобы наследовать один класс комментариев реагирования от другого, мы можем написать код так:

Javascript

class Label extends React.Component{
  constructor(props){
    super(props);
    this.className='plain-label';
  }
   render(){
     return 
        {this.props.children} 
      
   }
}

class SuccessLabel extends Label{
  constructor(props){
    super(props);
    this.className = this.className + ' success-label';
  }
}

class SuccessLabelWithIcon extends Label1{
  constructor(props){
    super(props);
    this.className = this.className + ' success-label';
  }
  render(){
    return 
{super.render()}▲
} } class ErrorLabel extends Label{ constructor(props){ super(props); this.className = this.className + ' error-label'; } } class Main extends React.Component{ render(){ ....
Success Label
Error Label
Success Label with Icon ... } }

Результат

Реагистрационные компоненты

Код выше опирается на Этикетка компонент и его оказывать метод. оказывать Метод опирается на Это .Classname (установлен в пределах Конструктор Для каждого расширенного класса) свойство, которое отличается от различных расширенных классов, и, следовательно, укладка зависит от CSS, прикрепленных к классное значение оказано.

Одним из недостатков наследства является четко видна в последнем случае. УСПЕКСАБЛЕВЕЛЬВИИТИКОН Класс – это УСПЕКСАБЕЛЬ Но стремится показать значок справа от этикетка текст. Однако с текущим кодом он не может этого сделать. Если мы не сделаем что-то подобное.

//SucessLabelWithIcon Component

  ....
   render(){
        return
        .....
        {super.render(▲)}
        .....
   }


//SuccessLabel Component
  ....
   render(args){
        return
        .....
          //do something with args
        .....
   }

Теперь это не может быть правильным способом сделать это. Потому что УСПЕКСАБЕЛЬ должен учитывать случаи использования другого класса.

Больше используйте случаи => Больше аргументов, и это становится неизвестным очень скоро.

Наследование находится в большинстве сценариев – просто не хорошее жизнеспособное решение. Поскольку расширение компонентов с наследством более или менее приводит к сценарию в какой-то момент, где поведение не может быть беспрепятственно. Однако с составом, это возможно.

Композиция в реакции

Композиция – это техника, которая позволяет нам объединить один или несколько компонентов в более новерее, улучшенный компонент, способный к большему поведению. Вместо продления другого класса или объекта композиция направлена только на добавление нового поведения.

А УСПЕКСАБЕЛЬ не Этикетка Но другой компонент, который бывает использовать Этикетка внутри. Свойства Этикетка не наследуются, только поведение. Что означает добавление Значок к УСПЕКСАБЕЛЬ Должно быть довольно легче.

Давайте попробуем композицию сейчас.

Javascript

class Label extends React.Component{

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

class SuccessLabel extends React.Component{
  
  render(){
    return ;  
  }
}

class ErrorLabel extends React.Component{
  
  render(){
    return ;  
  }
}


class SuccessLabelWithIcon extends React.Component{
 render(){
     return 
} } class Main extends React.Component{ render(){ ....
Success Label
Error Label
SuccessLabel With Icon ... } }

Результат

Реагистрационные компоненты

Это было просто и легко, не так ли? Существует множество способов составить свои компоненты реагирования и повышение их поведения. Поскольку композиция только направлена на добавление нового поведения в Can-do мода вместо это-а , это всего лишь вопрос решения, который поведение ваших компонентов потребностей и просто клубят их вместе.

Точно так же, вот и Ссылка на кодепен о том, что мы обсуждали в этом руководстве. Вы также можете прочитать другие важные темы о реагированных, таких как тестирование, в Шума и фермент или Карма и УБП Отказ

Счастливое кодирование !!