Как работают React Components

React Components — это фундаментальные строительные блоки любого приложения React. Они позволяют нам упростить сложные пользовательские интерфейсы, разбив их на небольшие фрагменты.

React Component vs React Component instance vs React Element

Эти три термина, казалось бы, обозначают одно и то же — элемент пользовательского интерфейса на экране. Но это не так.

React Component

React Component — это либо функция, либо класс ES6 — ни больше, ни меньше. Здесь вы управляете состоянием, обрабатываете события и реализуете другую пользовательскую логику.
Он никогда ничего не отображает на экране. Вместо этого вы создаете его экземпляр, чтобы сделать это.

const TextButton = ({text}) => {
  return <button>{text}</button>;
}

// It becomes more obvious with class-based component
// because you extend React.Component, not React.Element
class ListItem extends React.Component {
  render() {
    return <li>{this.props.children}</li>;
  }
}

React Component Instance

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

class ListItem extends React.Component {
  constructor(props) {
    super(props);
    console.log(`This is instance ${this}`);
  }

  render() {
    return <li>{this.props.children}</li>;
  }
}

const App = () => {
  return (
    <ul>
      <ListItem>First item</ListItem>
      <ListItem>Second item</ListItem>
      <ListItem>Third item</ListItem>
    </ul>
  );
}

React Element

React Element — это то, что возвращает React Component Instance во время выполнения. Это обычный объект JavaScript, который полностью описывает узел DOM.
Несколько React Elements вместе образуют виртуальный DOM, древовидную структуру, которая описывает пользовательский интерфейс вашего приложения React.

// After Babel
const App = () => {
  return React.createElement('ul', null, 
    React.createElement(ListItem, {children: 'First item'}),
    React.createElement(ListItem, {children: 'Second item'}),
    React.createElement(ListItem, {children: 'Third item'})
  )
}

// At run-time
const App = () => {
  return {
    "type": "ul", 
    "key": null, 
    "ref": null, 
    "props": { 
      "children": [
        { 
          "type": class ListItem,
          "key": null, 
          "ref": null, 
          "props": { 
            "children": "First item" 
          },
        },
        // ...
      ]
    }
  }
}

Общая картина работы React Components

1. Разработчики React создают React-компоненты на основе функций или классов, которые возвращают JSX.
2. Babel переносит JSX в React.createElement() или jsx() во время сборки.
3. React создает необходимые экземпляры React Components во время выполнения, и они возвращают React Elements.
4. ReactDOM рендерит виртуальный DOM, который состоит из React Elements.