Ответ 1

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

Ответ 2

Здесь задействованы три связанных типа, со своими именами:

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

Это немного удивительно, поскольку, если вы привыкли к другим интерфейсам пользовательского интерфейса, вы можете ожидать, что будут только два типа вещей, примерно соответствующие классам (например, 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 "Реагировать на компоненты, элементы и экземпляры" , который я рекомендую читать.

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

Ответ 3

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

"ReactElement - это легкое, неизменяемое, неизменное виртуальное представление элемента DOM" - Глоссарий терминов React

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

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

Ответ 4

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

A React Element - это простой старый JavaScript Object без собственных методов. Он имеет по существу четыре свойства:

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

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

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

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

Реакция компонентов и реагирование на экземпляры компонентов

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

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

Ответ 5

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

Eg -

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

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

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

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

Элемент - это простой объект, описывающий то, что вы хотите отобразить на экране в терминах узлов DOM или других компонентов. Элементы могут содержать другие элементы в своих реквизитах. Создание элемента React - это дешево. Как только элемент создан, он никогда не видоизменяется. Объектное представление элемента React будет следующим:

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)

Приведенный выше createElement возвращает как объект, как показано ниже,

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

И, наконец, он рендерится в DOM с использованием ReactDOM.render, как показано ниже,

<div id='login-btn'>Login</div>

Принимая во внимание, что компонент может быть объявлен несколькими различными способами. Это может быть класс с методом render(). Альтернативно, в простых случаях это может быть определено как функция. В любом случае он принимает реквизиты в качестве входных данных и возвращает дерево элементов в качестве выходных данных. JSX переносится как createElement в конце.

function Button ({ onLogin }) {
  return React.createElement(
    'div',
    {id: 'login-btn', onClick: onLogin},
    'Login'
  )
}

Ответ 9

Реактивные компоненты являются изменяемыми, в то время как элементы не являются

Ответ 10

Вот мой дубль:

Element - это то, что описывает, как построить VDOM. Это в основном "замороженная" версия соответствующего Component Instance.

Если бы все было functional component, тогда не было бы необходимости в дополнительной реакции Element. Иерархия functional component может напрямую создавать дерево VDOM.

Иерархия реагирования Component Instance (tree) - это "фабрика", и эта фабрика параметризована реквизитом, который подается на корень реакции Component Instance, и всем состоянием, "хранящимся" в любом месте дерева Component Instance.

Таким образом, реакция Element - это "абстрактное синтаксическое дерево", которое компилируется в фактический VDOM.

Так почему бы не сгенерировать VDOM напрямую, используя React Component Instances? Это настоящий вопрос здесь.

На первый взгляд, я не понимаю, почему это невозможно. Так что, скорее всего, ответ таков: это вопрос производительности.

Реакция Element - это один уровень абстракции между VDOM и Component Instance, почему эта абстракция необходима, мне не совсем понятно, скорее всего, она позволяет оптимизировать. Например, дерево Element не отображается полностью, если какой-то метод жизненного цикла в Component Instance говорит, что нет необходимости отображать это поддерево.

Теперь, в этом случае, логике, которая обрабатывает эту оптимизацию, "нужен" этот дополнительный уровень косвенности - потому что информация должна храниться где-то, что некоторая часть VDOM не должна сравниваться с новым VDOM, даже больше, может быть, новый ВДОМ вообще не должен рассчитываться. Таким образом, использование дополнительного уровня косвенности делает логику рендеринга более простой и приводит к более чистой и более удобной в реализации реализации - я думаю.

Эта концепция в Хаскеле называется "поднятие":

Например, монады в Хаскеле являются прекрасными примерами таких подъемов.

Монада - это своего рода описание вычисления, которое можно сохранить в виде значения, например, 42. Точно так же, реакция Elements - это описание того, как вычислять "новый" VDOM. Если кто-то хочет это вычислить.

Этот доклад описывает концепцию "дополнительной" косвенности с помощью нескольких простых примеров :

Другими словами: преждевременная оптимизация - корень всего зла.

Или:Основная теорема разработки программного обеспечения

Фундаментальная теорема разработки программного обеспечения (FTSE) является термином созданный Эндрю Кенигом для описания замечания Батлера Лэмпсона1 приписывается покойному Дэвиду Дж. Уилеру:2

Мы можем решить любую проблему, введя дополнительный уровень косвенности.

Таким образом, в моем понимании ответ Elements - это деталь реализации, которая изящно обрабатывает сложность и допускает некоторую оптимизацию (производительность). Я не понимаю, почему нельзя было избавиться от этой дополнительной косвенности - в принципе - реакция все равно будет работать "так же хорошо" - но она может быть очень медленной, реализация и поддержка самого "движка" реакции будет, вероятно, кошмаром.,

Пожалуйста, поправьте меня, если я что-то здесь упустил.

Цитируем ВАЖНУЮ часть ответа пользователя user6445533:

type, Строка, представляющая тег HTML или ссылку, относящуюся к Реагировать на компоненты

ЭТО КЛЮЧ ^^^^

Элемент НЕ ВДОМ.