Серия React --- React (1) Первое знакомство с React
Серия React --- React (2) опора и состояние компонентов
Серия React --- Жизненный цикл компонентов React (3)

React — это библиотека JavaScript, запущенная Facebook под девизом «Библиотека JavaScript для создания пользовательского интерфейса», поэтому она имеет дело только с пользовательским интерфейсом, который можно рассматривать как уровень V (представление) в MVC.

Три особенности React

компоненты

Все в React основано на компонентах. В React единственной заботой является создание компонентов. Каждый компонент имеет свое собственное состояние, и при изменении состояния компонент будет автоматически перерисовываться. Функции компонентов также являются тенденцией в разработке веб-интерфейса.

Пример компонента профиля:

// Profile.jsx
import React from 'react';
export default Class Profile extends React.Component {
    render() {
        return (
          <div  className="profile-component">
            <h2>Hi, I am {this.props.name}</h2>
          </div>
        )
    }
}

В других компонентах на него можно ссылаться как на тег HTML:

import Profile from './profile';

export default function(props) {
    return (
      <Profile />
    )
}

JSX

В приведенном выше методе рендеринга есть способ прямого вложения HTML в JS, который называется JSX. Этот синтаксис сочетает в себе преимущества JavaScript и HTML, то есть HTML можно использовать как обычно или синтаксис JavaScript можно вложить внутрь.Во время выполнения такие инструменты, как Babel, будут компилировать JSX в синтаксис JavaScript.

Всегда гораздо удобнее писать на JavaScript семантически, как в HTML.

Virtual DOM

При разработке React разработчикам в основном не нужно манипулировать фактическими узлами DOM.Каждый компонент React визуализируется с помощью Virtual DOM, который можно рассматривать как абстракцию DOM в памяти, реализованную в JavaScript. React реализует алгоритм Diff в виртуальном DOM, при рендеринге компонентов он эффективно находит измененные узлы и обновляет их до фактического DOM.

Понимание особенностей React

Понимание виртуального DOM

Веб-страницы состоят из вложенных элементов HTML. При использовании JavaScript для описания этих элементов эти элементы могут быть просто представлены как чистые объекты JSON. Например, сейчас нам нужно описать кнопку (кнопку), все мы знаем, что синтаксис HTML следующий:

<button class="btn btn-blue">
    <em>Confirm</em>
</button>

Это включает в себя тип элемента и атрибуты. Мы можем выразить эту кнопку как объект JSON следующим образом:

{
  type: 'button',
  props: {
    className: 'btn btn-blue',
    children: {
      type: 'em',
      props: {
        children: 'Confirm'
      }
    }
  }
}

В этом и заключается идея Virtual DOM: абстрагирование реальных узлов DOM в объекты JavaScript в памяти.

понимать компоненты

Конечно, мы можем легко инкапсулировать приведенный выше элемент кнопки и получить публичный метод для создания кнопки:

const Button => ({ color, text }) {
    return {
      type: 'button',
      props: {
        className: `btn btn-${color}`,
        children: {
          type: 'em',
          props: {
            children: text,
          },
        },
      },
    };
}

Когда мы хотим сгенерировать определенную кнопку в элементе DOM, мы можем вызвать Button({color:'blue', text:'Confirm'}) для ее создания. Если вы внимательно обдумаете этот процесс, то обнаружите, что метод Button может реально существовать как элемент (компонент Profile выше — это то же самое), имя метода соответствует типу элемента DOM, а параметры соответствуют элементу DOM. атрибуты, поэтому сконструированный элемент является компонентным элементом React. Если структура JSON описывает этот компонент, то, вероятно, она выглядит так:

{
    type: Button,
    props: {
      color: 'blue',
      children: 'Confirm'
    }
}

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