React

Вступление

Я уже некоторое время работаю с фреймворком React, и чем больше я его понимаю, тем больше я трепещу перед фреймворком.

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

Мощная модель композиции

Композиция - это принцип программирования, не зависящий от языка, который основан на построении программ или функций путем их объединения.

React расширяет ту же концепцию, и можно создавать компоненты React, объединяя их вместе.

Давайте для начала рассмотрим очень простой пример, страницу, содержащую компоненты верхнего, основного и нижнего колонтитула.

function Header (props) {
        <>
            <h3>{props.headerInfo}</h3>
    </>
}

function Footer (props) {
        <>
            <h5>{props.footerInfo}</h5>
    </>
}

function Main (props) {
    return (
        <>
            <h1>{props.mainInfo}</h1>
    </>
    )
}

function Home (props) {
  return (
    <div>
      <Header headerContent={props.headerInfo} />
      <Main mainContent={props.mainInfo} />
      <Footer footerContent={props.footerInfo} />
    </div>
  )
}

Как видно из приведенного выше примера, каждая функция, такая как Header, Main и Footer, возвращает представление. Каждое из этих представлений далее составляется в компоненте «Главная». Идея создания пользовательского интерфейса путем комбинирования одного или нескольких компонентов делает его невероятно мощным.

И эта идея была использована сообществом для разработки множества сторонних компонентов React, доступных в NPM.

Простая аналогия, которая может заставить все вышеперечисленное «щелкнуть»: «Реагировать на композицию» эквивалентна пиццерии «Создай свою собственную пиццу».

Однонаправленный поток данных

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

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

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

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

Преимущества системы с однонаправленным потоком данных:

1. Поскольку состояние поддерживается в одном месте, можно легко отследить, какие действия обновляют данные, поскольку поток является только односторонним.
2. Вы можете контролировать, какие компоненты следует повторно отображать при изменении общего состояния. Вы помещаете все эти компоненты в одно общее состояние, содержащее родительский компонент.
3. Легко отслеживать и исправлять ошибки и ошибки, вызванные любым плохо написанным кодом.

Декларативный интерфейс

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

а. Состояние компонентов.

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

Давайте посмотрим на следующий пример кода в JQuery & React:

Используя JQuery:

$('btn').click(() => {
  $(this).toggleClass('highlight')
  $(this).text() === 'Add Highlight'
    ? $(this).text('Remove Highlight')
    : $(this).text('Add Highlight')
})

Используя React:

<Btn
  highlight={this.state.highlight}
  onToggle={this.toggleBtn}
/>

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

1. В примере JQuery вам необходимо получить доступ к DOM и убедиться, что он обновляется на основе событий.
2. В примере с React вам нужно беспокоиться только о следующих двух вещах:

• Состояние или как обновить состояние на основе события. React сделает тяжелую работу по обновлению DOM.
• Как пользовательский интерфейс компонента Button должен реагировать на изменение состояния? Это описано в функции this.toggleBtn.

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

Использует функции «Core JavaScript» - минимальный пользовательский API

React не пытается воссоздать функциональность, которую вы уже можете реализовать с помощью JavaScript.

Давайте посмотрим на следующий пример создания неупорядоченных списков из массива «products» с использованием трех различных платформ JavaScript: Angular, Vue и React.

Angular использует ngFor для циклического перебора массива products.

<ul id="products">
        <li *ngFor="let product in products">
                {{product.name}}
        </li>
</ul>

Vue использует 'v-for' для просмотра массива 'products'.

<ul id="products">
        <li v-for="product in products">
                {{product.name}}
        </li>
</ul>

Используя React

<ul id="products">
        {products.map((product, index) => (
            <li key="index">
                {{product.name}}
          </li>
</ul>

Как видно из приведенного выше примера, React использует метод JavaScript map по сравнению с любыми специальными API, предоставляемыми Vue или Angular. До того, как на меня набросятся Angular или Vue, я ни в коем случае не пытаюсь принизить другие фреймворки. Это всего лишь один важный момент, который я хотел бы здесь выделить.

Здесь важно отметить, что уровень API React сведен к минимуму и использует функции, предоставляемые JavaScript.

Правильная абстракция

Я думаю, что React предоставляет правильную абстракцию по следующим причинам:

1. Как фреймворк, React очень самоуверен, как и любая абстракция.
2. Абстракция, предоставляемая React, позволяет пользователям применять ее, не усложняя ее.
3. Поведение, обеспечиваемое абстракцией, достаточно просто для расширения и поддерживает почти бесконечное количество вариантов использования, насколько это возможно, без раскрытия деталей реализации.

Как говорится, «доказательство в пудинге», и вам просто нужно взглянуть на инструменты, созданные с использованием или поверх React, чтобы понять, насколько мощна абстракция, предоставляемая React.

• Gatsby - это бесплатная платформа с открытым исходным кодом на основе React, которая помогает разработчикам создавать невероятно быстрые веб-сайты и приложения.
• Next.js - это платформа JavaScript, которая позволяет создавать отрисованные на стороне сервера статические веб-приложения с использованием React.

Вывод

Я надеюсь, что причины, упомянутые в посте, сделают его достаточно убедительным для того, чтобы вы начали изучать ReactJS в качестве предпочтительной среды JavaScript.