React Element — это простой JavaScript-объект, который описывает, что ты хочешь увидеть на экране. Он представляет DOM-узлы или другие компоненты и содержит:
type (HTML-тег или ссылка на компонент)props (включая children и атрибуты)Создание React Element — это дёшево и просто — после создания элемент никогда не меняется.
Используя React.createElement():
const element = React.createElement(
'div',
{ id: 'login-btn' },
'Login'
);
Это возвращает простой объект:
{
type: 'div',
props: {
children: 'Login',
id: 'login-btn'
}
}
Затем элемент отрисовывается в DOM через ReactDOM.render():
<div id='login-btn'>Login</div>
React Component — это переиспользуемая функция или класс, который принимает props на вход и возвращает JSX-дерево (которое транслируется в вызовы React.createElement()).
Компоненты можно объявить как:
render()const Button = ({ onLogin }) =>
<div id={'login-btn'} onClick={onLogin}>
Login
</div>
Этот JSX транслируется в:
const Button = ({ onLogin }) =>
React.createElement(
'div',
{ id: 'login-btn', onClick: onLogin },
'Login'
);
Elements — это результат — статичные описания UI в виде объектов. Components — это источник — переиспользуемые функции, которые производят Elements, зачастую с динамическим поведением и управлением состоянием.
React Element — это обычный JavaScript объект, который неизменяем после создания, тогда как Component — это переиспользуемая функция или класс, который создаёт Elements.
Новый — ещё не проверен сообществом
Вы