Компонент и элемент в React
В терминах React встречаются такие слова как компонент, элемент и экземпляр. Чтобы разобраться в них и понять как они работают, давайте посмотрим на примеры:
const App = () => {
return <p>Hello React</p>;
};
Код выше является объявлением React компонента. Если конкретнее, то это функциональный компонент (объявления классовых компонентов тоже являются компонентами). Рендеринг компонента происходит, когда мы используем его этот компонент как React элемент с угловыми скобками (например <Greeting />) в другом компоненте:
const Greeting = ({ text }) => {
return <p>{text}</p>;
};
const App = () => {
return <Greeting text="Hello React" />;
};
Мы можем отрендерить компонент как элемент несколько раз. Каждый раз, когда мы рендерим компонент как элемент, мы создаем экземпляр данного компонента:
const App = () => {
return (
<>
<Greeting text="Hello Instance 1 of Greeting" />
<Greeting text="Hello Instance 2 of Greeting" />
</>
);
};
Хоть компонент и объявлен один раз, он может использоваться несколько раз. При рендере он становится экземпляром компонента и живет в дереве React.
Робин Верух в своем блоге разобрался, как происходит рендер элементов и почему не стоит вызывать компонент как функцию при рендере в другом компоненте.
www.robinwieruch.de/react-e…omponent
