Въведение към React: Разлика между класния компонент и функционалния компонент

Нов ли сте в реакция? Искате ли да научите нещо ново за 5 минути или по-малко ?. Нека научим за компонента на реакцията

Какво е компонент?

Юмрук на всичко, преди да се задълбочим в тази тема, трябва да знаем отлично какво всъщност представлява компонент.

Компонентът (в React) би бил описан като блок или част от нашето приложение, който може да се използва повторно в целия проект (и други, може би), обикновено е свързан с UI елемент и неговото поведение.

Сега, ако приемем, че знаете основния, нека да проверим за двата типа компоненти, които можем да създадем в проект React, класови компоненти и функционални компоненти.

Компонент на класа

Това също се нарича Основен компонент. От ECMAScript 2015, ние имаме „клас“ в JavaScript. React използва този синтаксис, за да създаде състоятелен компонент с жизнения цикъл. Състоянието обикновено се използва за промяна на поведението на нашия компонент или неговите деца.

Нека разбием този код. Тук имаме „JS клас“, който наследява функционалността от React.Component, след това декларираме неговия конструктор, който е получил реквизита като аргумент. След това извикваме супер, за да предадем данните на родителския клас Компонент, това е необходимо, когато създаваме този тип компонент.

„Реквизитът“ е обект, който има всички атрибути, които използваме компонента като маркер.

Компонентът Lamp има основно предложение, той представя HTML блок с текст и бутон.

Щраквайки върху бутона за включване или изключване на лампата, ето къде държавата ни влиза в играта, в ред 4, инициализираме състоянието на лампата и след това декларираме метода switchLight, той ще превърне състоянието на нашата лампа.

това „състояние“ е обект с някои свойства, които ще се променят във времето на изпълнението на класа. Не трябва да се променя директно, а методът setState.

Можете да промените състоянието по този начин на:

Функционален компонент

Сега, ако искаме да изградим някакъв минимален, прост и несъстоятелен компонент, това ще ви помогне да намалите количеството използван код и да приложите принципа DRY по-лесно. Компонентът funcional е функция на JavaScript, която връща някои елементи от Jxs.

Нека да проверим този пример за компонент на крушка.

Точно тук ние имаме редовна функция, тя получава унищожен обект със свойство с име lampState, той се обръща към локална променлива и ние преценяваме дали е вярно или неверно, за да върнем различен img маркер.

Сега можем да го използваме в компонента Lamp, за да покажем как могат да работят добре заедно.

Това е всичко, когато щракнете върху бутона за превключване, изображението на включената крушка ще се промени.

Ами куките?

Куките са предстояща функция, която ви позволява да използвате състояние във функционален компонент. Това трябва да се обясни с повече подробности, защото трябва да копаем по-дълбоко в реакцията, а също така мисля, че заслужава своя собствена статия.

Благодарим ви за четенето, ако ви хареса или не, дайте ми отзиви.-