Úvod
Komponenta je pravděpodobně nejdůležitější koncept, kterému je třeba v Reactu porozumět. Je to jeden z základních stavebních kamenů of React, který nám umožňuje rozdělit uživatelské rozhraní na nezávislé, opakovaně použitelné části, čímž je vytváření uživatelských rozhraní mnohem jednodušší. Všechny tyto nezávislé komponenty jsou pak spojeny do nadřazené komponenty, která bude sloužit jako naše konečné uživatelské rozhraní.
Co je komponenta?
komponenta je samostatný, opakovaně použitelný blok kódu, který rozděluje uživatelské rozhraní na menší části namísto vytváření celého uživatelského rozhraní v jediném souboru. Tlačítka, formuláře, dialogy a tak dále lze všechny vyjádřit jako komponenty. Komponenty React přijímají libovolné vstupy ("props" ) a vrátí prvky React nebo kód JSX, který říká, co by se mělo na obrazovce vykreslit.
Abychom demonstrovali, jak komponenty fungují, rozdělili jsme uživatelské rozhraní příkladu Aplikace Todo do jednotlivých komponent:
Tato aplikace Todo se skládá ze čtyř různých komponent které usnadňují pochopení a údržbu kódu. Při vytváření větších aplikací můžeme skončit s mnoha komponentami, takže je důležité mít dobře strukturovaný a čitelný kód.
Poznámka: Široce přijímaná konvence říká, že všechny názvy komponent musí začít velkým písmenem.
Typy komponent v Reactu
V Reactu jsou primárně dva typy komponent – Functional a Třída komponenty.
Funkční součásti
Toto je nejjednodušší způsob vytvoření komponenty , je to první a doporučený typ komponenty v Reactu. Funkční komponenta je v podstatě funkce JavaScript/ES6, která vrací speciální syntaxi JavaScriptu nazvanou JSX nebo prvek React. Níže uvedená funkce je platnou funkční komponentou, která přijímá objekt vlastností , obvykle pojmenované rekvizity .
function Introduction(props) {
return <h1>Hello, I am {props.name}</h1>;
}
Alternativně můžeme také vytvořit funkční komponent pomocí funkce šipky zápis:
const Introduction = (props) => {
return <h1>Hello, I am {props.name}</h1>;
}
Poznámka: V podstatě je to jen další funkce JavaScriptu. To, co ji odlišuje od ostatních obvyklých funkcí, je její návratová hodnota – kód ve formátu JSX (JavaScript XML).
Komponenty třídy
třída komponent je třída ES6, která rozšiřuje Třída komponenty React a musí mít render() metoda, která vrací JSX. V případě potřeby přijímá rekvizity v konstruktoru.
Je to druhý typ komponenty a byl většinou používán, protože "stav" nebylo možné použít uvnitř funkčních komponent ve starších verzích Reactu (před 16.8). V důsledku toho byly funkční komponenty použity pouze pro vykreslování uživatelského rozhraní, zatímco komponenty třídy byly použity pro správu dat a některé další operace, jako jsou metody životního cyklu a tak dále. Nicméně se zavedením háčků React , to se změnilo a nyní můžeme používat stavy i ve funkčních komponentách.
Níže je to samé Introduction komponenta, ale tentokrát vytvořená jako komponenta třídy:
class Introduction extends React.Component {
render() {
return <h1>Hello, I am {this.props.name}</h1>;
}
}
Poznámka: Nyní, když jsme vytvořili funkční i třídní komponenty, porovnejte je – uvidíte, že obsah je v podstatě stejný.
Využití komponent v Reactu
Zatím jsme viděli, jak vytvořit funkční nebo třídní komponentu. Nyní se podívejme, jak můžeme tyto komponenty použít v nadřazené komponentě. Abychom mohli komponentu použít později (nebo v nadřazené komponentě), musíme ji nejprve exportovat, abychom ji mohli importovat jinam:
const Introduction = (props) => {
return <h1>Hello, I am {props.name}</h1>;
}
export default Introduction;
Po importu se na něj můžeme odkázat v nadřazeném komponenta (v tomto případě App komponenta):
import Introduction from './Introduction';
const App = () => {
return (
<div className="App">
<Introduction name="John Doe" />
</div>
);
}
Předávání dat prostřednictvím rekvizit do komponent
Když nainstalujeme React pomocí create-react-app příkazu, automaticky získáme funkční komponentu v našem App.js soubor, který slouží jako výchozí bod pro naši aplikaci. Většina našich údajů bude s největší pravděpodobností umístěn v App.js při vytváření našich aplikací a nepochybně budeme chtít tato data předat novým komponentám (dětským komponentám). rekvizity , což je zkratka pro "vlastnosti", se k tomu používají.
Toto je důležitý koncept v Reactu, který umožňuje komponentám mezi sebou komunikovat. Rekvizity jsou pouze pro čtení , takže mohou přenášet data pouze v jednom směru (od nadřazených k podřízeným komponentám). Podpěry neumožňují předávání dat z potomka na rodiče nebo z komponenty do komponenty na stejné úrovni.
Nyní vytvoříme Button komponentu a poté předejte názvy různých tlačítek jako rekvizity:
const Button = (props) => {
return (
<div>
<button class="btn">{props.name}</button>
</div>
);
};
export default Button;
Vraťme se k App.js a podívejte se, jak můžeme předávat data komponentě tlačítka pomocí rekvizit. Vše, co musíme udělat, je definovat podpěru na Button Komponenta a přiřaďte jí hodnotu:
Zdarma e-kniha:Git Essentials
Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!
import Button from './Button';
const App = () => {
return (
<div className="App">
<h1>Hello World</h1>
<Button name="Login" />
<Button name="Logout" />
<Button name="Sign Up" />
</div>
);
};
export default App;
Poznámka: Abychom ji mohli použít v nadřazené komponentě, musíme komponentu importovat.
Rekvizity lze použít k předání jakéhokoli typu dat, včetně polí a objektů, takže jejich použití není nijak omezeno.
Rozdělení aplikace na součásti
Než tuto příručku shrneme, podívejme se na příklad StudentInfo komponenta, která obsahuje detaily studentů a detaily skóre.
const StudentInfo = (props) => {
return (
<div className="student">
<div className="student-info">
<img
className="Avatar"
src={props.student.image}
alt={props.student.name}
/>
<div className="student-name-info">
<p>{props.student.name}</p>
<p>{props.student.userName}</p>
</div>
</div>
<div className="score-details">
<div className="Comment-text">{props.score}</div>
<div className="Comment-date">{props.remark}</div>
</div>
</div>
);
};
export default StudentInfo;
To trvá student objekt se spoustou informací (jako rekvizity) a popisuje studentskou kartu, aby se vedle jeho skóre a poznámky zobrazily podrobnosti o studentovi. Kvůli vnoření může být obtížné tuto součást změnit a je také obtížné znovu použít její jednotlivé části.
Pojďme z něj extrahovat komponentu, a tou je StudentInfo sekce:
const StudentInfo = (props) => {
return (
<div className="student-info">
<img
className="Avatar"
src={props.student.image}
alt={props.student.name}
/>
<div className="student-name-info">
<p>{props.student.name}</p>
<p>{props.student.userName}</p>
</div>
</div>
);
};
export default StudentInfo;
Nyní můžeme nadřazenou komponentu zjednodušit, aby vypadala takto:
import StudentInfo from './StudentInfo';
const StudentInfo = (props) => {
return (
<div className="student">
<StudentInfo student="props.student" />
<div className="score-details">
<div className="Comment-text">{props.score}</div>
<div className="Comment-date">{props.remark}</div>
</div>
</div>
);
};
export default StudentInfo;
Extrahování komponent se může na první pohled zdát nudné, ale sbírka opakovaně použitelných komponent nám prospívá ve větších aplikacích.
Závěr
V této příručce jsme se mohli naučit, jak fungují komponenty v Reactu, dva typy komponent a jak předávat data z jedné komponenty do druhé pomocí rekvizit.