Разница между компонентом реакции и элементом реакции

Question

В чем разница между компонентом React и элементом React? Документация упоминает оба, но не вдаваясь в детали, некоторые методы требуют компонентов, других элементов ...

Answer 1

Рассмотрим компонент как класс и элемент в качестве экземпляра. Это оно!

Answer 2

Чтобы подробнее разобраться в ответе, элемент React не имеет никаких методов и ничего на прототипе. Это также делает их быстрыми.

«А ReactElement представляет собой легкое, без гражданства, неизменное, виртуальное представление DOM Element» - https://facebook.github.io/react/docs/glossary.html#react-elements

реагирует компонент render() функции возвращает DOM дерево реагирующих элементов за кулисами (Это виртуальная DOM, кстати). Существует некоторое сложное отображение и дифференциальная логика, но в основном эти элементы React сопоставляются с элементами DOM.

Вы также можете создать элемент непосредственно React.createElement(arg), где arg может быть именем тега html или классом React Component.

Answer 3

Реагировать Элементы

РЕАКТ Элемент просто обычный старый JavaScript Object без собственных методов. Он имеет по существу четыре свойства:

• type, а String, представляющие HTML-тег или ссылку со ссылкой на React компонент
• key, A String, чтобы однозначно идентифицировать React элемент
• ref, ссылку на доступ либо узел, лежащий в основе DOM или React экземпляра компонента)
• props (свойства Object)

A React Element не является экземпляром компонента React. Это просто упрощенное «описание» того, как должен выглядеть экземпляр компонента React (или в зависимости от type HTML-тега), который должен быть создан.

A React Element, который описывает компонент React, не знает, к какому узлу DOM он в конечном итоге отображается - эта ассоциация абстрагируется и будет разрешена при рендеринге.

Реагирующие элементы могут содержать дочерние элементы и, таким образом, способны формировать деревья элементов, которые представляют собой дерево виртуальной DOM.

React Компоненты и React экземпляров компонентов

Пользовательский React компонент либо созданный React.createClass или путем расширения React.Component (ES2015). Если создается компонент React Component, он ожидает propsObject и возвращает экземпляр, который называется экземпляром компонента React.

Компонент React может содержать состояние и имеет доступ к методам React Lifecycle. Он должен иметь по крайней мере метод render, который возвращает элемент React (-tree) при вызове. Обратите внимание, что вы никогда не создаете экземпляр компонентов React самостоятельно, но пусть React создаст его для вас.

Answer 4

A React Element - это то, что вы считаете основным элементом html (dom, чтобы быть точным). Это всего лишь способ создания элемента без использования очень противоречивого формата jsx.

A React Component - это то, что вы можете рассматривать как объект. Он имеет свои методы, поддерживает React lifecycles и, как правило, недостижим (по крайней мере, еще не нашел повторного использования, добро пожаловать на примеры). Он обязательно должен иметь функцию рендеринга.

A React Class - это то, что вы называете классом. Функциональные мудрые React Class и React Component такие же. Только синтаксис - это реальное изменение, так как React Component основан на ES6 syntax. Другим существенным изменением является привязка функций по умолчанию к этому, больше не поддерживается, если не использовать функции стрелок. Mixins также больше не поддерживаются с ES6.

Answer 5

React Element - Это простой объект, который описывает узел DOM и его атрибуты или свойства, которые вы можете сказать. Это неизменный объект описания, и вы не можете применять к нему какие-либо методы.

Например -

<button class="blue"></button> 

React Component - это функция или класс, который принимает ввод и возвращает элемент React. Он должен поддерживать ссылки на свои узлы DOM и экземпляры дочерних компонентов.

const SignIn =() => (
    <div> 
    <p>Sign In</p> 
    <button>Continue</button> 
    <button color='blue'>Cancel</button> 
    </div> 
); 

Answer 6

Есть три связанные виды вещи, связанные здесь, со своими собственными именами:

• Компоненты
• компонентов экземпляры
• Элементы

Это немного удивительно, , поскольку, если вы привыкли к другим интерфейсам пользовательского интерфейса, ght ожидает, что будут только два типа вещей, примерно соответствующие классам (например, Widget) и экземплярам (например, new Widget()). В Реате это не так; экземпляры компонента - это , а не то же, что и элементы, и между ними нет взаимно однозначных отношений. Чтобы проиллюстрировать это, рассмотрим следующий код:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    console.log('This is a component instance:', this); 
    } 

    render() { 
    const another_element = <div>Hello, World!</div>; 
    console.log('This is also an element:', another_element); 
    return another_element; 
    } 
} 

console.log('This is a component:', MyComponent) 

const element = <MyComponent/>; 

console.log('This is an element:', element); 

ReactDOM.render(
    element, 
    document.getElementById('root') 
); 

В приведенном выше коде:

• MyComponent (самкласс) представляет собой компонент
• element является элементом. Это не экземпляр MyComponent; скорее, это просто описание создаваемого экземпляра компонента. Это объект с key, props, ref и type Недвижимость. Здесь key и ref: null, props - пустой объект, а type - MyComponent.
• экземпляр из MyComponent создается (и в приведенном выше примере записывается сам из его конструктора), когда отображается element.
• another_element также является элементом, и имеет key, ref, props и type свойства так же, как element делает - но на этот раз значение type является строка "div".

Конструктивные причины, по которым React имеет эти три различные концепции, подробно рассматриваются в сообщении блога команды React React Components, Elements, and Instances, которое я рекомендую читать.

Наконец, следует отметить, что, хотя официальные документы строго относятся к использованию термина «компонент» для ссылки на функцию или класс и «экземпляр компонента» для ссылки на экземпляр, другие источники не обязательно придерживаются этого терминология; вы должны ожидать увидеть «компонент», используемый (неправильно), чтобы означать «экземпляр компонента» при чтении ответов «Переполнение стека» или обсуждений в GitHub.

Answer 7

Компонент является фабрикой по созданию элементов.