Reakce: Rozdíl mezi komponentou třídy a funkční komponentou

Jste v novém vztahu? Chcete se naučit něco nového za méně než 5 minut? Pojďme zjistit o reakční složce.

Co je to součást?

Za prvé, než se pustíme do hlubšího porozumění tomuto tématu, musíme přesně vědět, jaké jsou jeho složky.

Komponenta (reakce) je definována jako blok nebo program, který lze znovu použít v celém programu (a nikoli v jiných), obvykle spojený s prvkem uI a jeho chováním.

Nyní, když znáte základy, pojďme se podívat na dva typy komponent, které můžete vytvořit v React, Class Class a Functional Components.

Komponenta třídy

Tomu se říká hlavní komponenta. Od roku ECMAScript 2015 máme v javascriptu „třídu“. React používá tuto syntaxi k vytvoření komponenty stavu s životním cyklem. Stát se často používá ke změně chování našich voličů nebo jejich dětí.

Přerušme tento kód. Zde máme "třídu JS", která zdědí funkci z React.Component, takže deklarujeme konstruktora, který akceptuje rekvizity jako argument. Dále voláme data, jsme povinni vytvořit tento typ komponenty pro předání dat komponentám nadřazené třídy.

„Requisite“ je objekt, který přijímá všechny atributy, které používáme jako značku komponenty.

Komponenta lampy má základní nabídku, která poskytuje blok HTML s textem a tlačítky.

Po zapnutí nebo vypnutí spínače světla je naše pozice ve hře. naší lampy.

tento "stav" je objekt s některými vlastnostmi, které se mění během provádění kurzu. Nemělo by se přímo měnit, ale metoda setState.

Stav můžete změnit následovně:

Funkční složka

Pokud nyní chceme vytvořit minimální, jednoduchou a bez státní příslušnost, pomůže vám to snížit množství použitého kódu a zjednodušit princip DRY. Funkční komponenta je funkce javascript, která vrací některé Jxs.

Zvažte příklad součásti žárovky.

Zde máme konstantní funkci, která získá poškozený objekt nazvaný lampState, stává se lokální proměnnou a vyhodnocuje, zda je návrat jiné značky obrázku správný.

Nyní ji použijeme k ukázce toho, jak může komponenta Lamp spolupracovat.

Stisknutím tlačítka se změní obrázek žárovky.

A co háčky?

Háčky jsou nadcházející funkcí, která vám umožní použít pozici ve funkční komponentě. To je třeba vysvětlit podrobněji, protože se musíme ponořit hlouběji do reakce, a myslím si, že si zaslouží svůj vlastní článek.

Díky za čtení, a pokud se vám líbí nebo ne, dejte mi vědět, co si myslíte. -