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

Скачать этот великолепный Ract andout actor locator app Шаблон, чтобы создать свой собственный приложение для хранения магазинов всего за несколько минут. Используя этот полностью закодированный стартовый комплект, написанный в реактивном родном, вы экономите недели дизайна и разработки и можете сосредоточиться на других важных усилиях, таких как взаимодействие клиентов и маркетинг.

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

Создание компонентов в Реагировать это весело, но иногда может быть утомительно. Предположим, один компонент нуждается в кнопке с синим цветом, а другая нужна кнопка с черной границей. Аналогично, третий компонент нуждается в кнопке с желтым цветом и синей границей. Теперь, написание кода для кнопки каждый раз с разным стилем, конечно, утомительно и немного разочаровывает. Должны быть способы повторного использования кода и повышения компонентов.

Да, наследство и композиция оба могут быть использованы для повторного использования кода и для усиления компонентов, но в соответствии с Core React Team, мы должны предпочитать композицию по наследству.

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

Наследование – это концепция в объектно-ориентированном программировании, в котором один класс наследует свойства и методы другого класса. Это полезно в использовании кода. Давайте посмотрим, что это реализовано в реакции.

Выполнение

import React from 'react';
import './App.css';
class Vehicle extends React.Component{

constructor(props){
   super(props)
   this.className = 'Vehicle'
}
render(args){
   return(
      
{this.props.children}{args}
   )
 }
}
class Car extends Vehicle{
  constructor(props){
     super(props)
  }
}
class Bike extends Vehicle{
  constructor(props){
    super(props)
  }
 }
class Main extends React.Component{
 render(){
  return(
     
         Vehicle
         Car
         Bike
         
   )
  }
}
export default Main;

Существует три компонента, используемые в основном классе, автомобиле, автомобиле и велосипеде. Автомобиль является базовым классом, в то время как класс автомобиля и велосипеда получают из него, используя ключевые слова расширений. Классы автомобиля и велосипеда наследуют свойства класса автомобиля. Способ рендера в классе автомобиля унаследован как полученными классами. Также свойство Classname также унаследовано автомобилем и велосипедным классом.

Добавление другого компонента

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

class Truck extends Vehicle {
constructor(props){
  super(props)
}
render(){
  return 

     {super.render()} is a heavy vehicle
       
  }
}

Мы использовали метод рендера в этом компоненте. Помните, в этом классе имеется наследство представляют метод класса автомобиля. Итак, чтобы добавить дополнительный текст, мы должны использовать Super Method для вызова метода рендера базового класса. Давайте соблюдаем вывод.

Теперь это не то, что мы ожидали. «Грузовик – это тяжелый автомобиль», это должно быть в одной строке с одним CSS. Это один недостаток использования наследства в реакции. Однако мы можем достичь желаемых результатов, используя аргументы. Давай посмотрим, как это сделать.

//Vehicle class
class Vehicle extends React.Component{
  constructor(props){
     super(props)
     this.className = 'Vehicle'
}
render(args){
   return(
       
{this.props.children} {args}
    )
  }
}
//Truck class
class Truck extends Vehicle{
  constructor(props){ 
    super(props)
}
render(){
  return 
{super.render( is a heavy vehicle)}
   }
}

Соблюдайте изменения, сделанные в классах автомобиля и грузовика.

В классе грузовика мы передали метку SPAN с текстом в метод рендеринга базового класса, то есть. Транспортное средство.

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

Да, мы получили желаемый выход. Но это правильно? Нет, это не так. Мы сдали аргумент от класса грузовика, но как насчет других классов? Мы не должны использовать этот метод, потому что класс автомобиля должен вместить случаи использования другого класса. Помните, что больше случаев использования, больше аргументов. Здесь выглядит хорошо, но когда есть несколько случаев, похожее на это, код станет сложным, и будет очень сложно сохранить его. Мы используем наследство для повторного использования кода, чтобы код выглядел менее сложным в первую очередь? Разве мы не так?

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

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

Выполнение

import React from 'react';
import './App.css';
class Vehicle extends React.Component{
  render(){
    return(
{this.props.children}
)
  }
}
class Car extends React.Component{
  render(){
      return({this.props.children})
  }
}
class Bike extends React.Component{
render(){
    return({this.props.children})
  }
}
class Main extends React.Component{
render(){
  return(
           Vehicle
           Car
           Bike
            
       )
   }
}
export default Main;

В вышеуказанном коде мы использовали композицию. Осторожно наблюдайте, ни один из кода не наследует из любого другого компонента. Но мы видим, классы автомобиля и велосипеда наследуют поведение класса автомобиля. Мы только что использовали компонент автомобиля внутри классов. Давайте посмотрим на вывод.

Очевидно, что автомобиль и велосипедные классы наследуют поведение класса автомобиля. Теперь давайте добавим еще один компонент, который наследует поведение класса автомобиля, но вместе с существующим поведением мы тоже добавлю новое поведение.

class Truck extends React.Component{
  render(){
     return( 
      {this.props.children} is a heavy vehicle. 
   )
  }
}

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

{this.props.children} is a heavy vehicle. 

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

Это завершает наше понимание наследования VS состав в реакции.

Вот почему состав предпочтительнее по наследству. Использование композиции довольно легко и просто, в то время как наследство становится намного осложненным с добавлением дополнительного кода. Добавление поведения настолько прост в композиции, которую нам просто нужно для изменения кода только в компоненте. При наследовании существует осложнение, чтобы добавить новое поведение. Добавление большего количества поведения приводит к большему количеству случаев использования, что, в свою очередь, приводит к большему количеству аргументов. Код становится более сложным и неоданным. Следовательно, логично предпочитать композицию по наследству в реакции. Таким образом, эта статья циркулирует концепцию наследования VS состав, который необходим для любого программиста.