Компонент — это функция, которая возвращает элементы React (дерево элементов), обычно записывается как JSX.
* Это описание части пользовательского интерфейса
* «Чертеж» или «шаблон»
пример:-
const App(){ return(<div>Hello World !</div>); } export default App;
Экземпляр
Экземпляр создается, когда мы «используем» компоненты, например, ‹App /›
и React внутренне называет это, это фактическое «Физическое проявление» компонента, живущего в нашем дереве компонентов.
- Каждый экземпляр имеет свое состояние и свойства.
- у него также есть жизненный цикл, то есть он может родиться, жить и умереть
пример:-
import {Header, Body , Footer } from "./Schema" //thinking named export from single file const App(){ return ( <> // instances <Header /> <Body /> <Footer /> </>) } export default App;
Элемент
В React каждый экземпляр возвращает один или несколько элементов React. За кулисами JSX преобразовался в несколько вызовов функции Rect.createElement(). и вот что получается в результате использования компонента в нашем коде.
Элемент — это один большой неизменяемый объект JS, который JS хранит в памяти, и эта информация необходима для создания элементов DOM.
пример:
const element = React.createElement("h1"); //returns an object similar to this one: { type: 'h1', props: {} }
Общий вид графического представления того, как они создают пользовательский интерфейс.
если вам нравится это чтение, пожалуйста, подпишитесь и поделитесь.