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

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

Предварительный просмотр:

Компонент приложения:

Компонент домашней страницы

Компонент страницы поиска:

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

Теперь React использует синтаксис JSX вместо обычных элементов HTML. JSX — это JavaScript XML, в котором мы можем писать код JavaScript и код HTML, чтобы различать, что мы не можем использовать атрибут класса внутри элемента JSX и способ обработки событий, например, при изменении или при щелчке. будет отличаться.

В обычном JavaScript обработчики событий будут написаны строчными буквами, а функция будет назначена в круглых скобках, например onclick="handleClick()" или onchange="handleChange()", но в JSX обработчики событий будут иметь CamelCase, и вместо добавления круглых скобок в конце будет передаваться ссылка на функцию, например onClick={handleClick} или onChange={handleChange. Это связано с тем, что React использует механизм SyntheticEvent для обработки событий, который похож на оболочку собственного события браузера и имеет кросс-браузерную поддержку.

Это все общий обзор React и его отличий от JavaScript, но зачем нам React, если у нас уже есть JavaScript для выполнения клиентской части?

Потому что для обновления DOM используется виртуальный DOM вместо операций реального DOM, в отличие от обычного JavaScript.

Виртуальный DOM против реального DOM:

DOM означает модальный объект документа. Всякий раз, когда браузер получает HTML-страницу с сервера, браузер создает дерево с узлами HTML, проходя через структуру HTML, это дерево называется DOM и представляет собой интерфейс, через который JavaScript или другой интерфейсный язык может взаимодействовать со страницей, отображаемой в браузере.

С другой стороны, Virtual DOM — это не настоящее дерево DOM, это простой объект JavaScript, созданный с помощью реакции, который представляет собой настоящий DOM в памяти, и его легко хранить в памяти.

Теперь переходим к обсуждению, почему React вместо обычного JavaScript?

При использовании обычного JavaScript, если нам нужно добавить какой-либо динамический контент, например таблицу или список, нам нужно пройти через данные и сгенерировать строку структуры HTML, как показано ниже.

const data = [{
company:'Alfreds Futterkiste',
contact:'Maria Anders',
country:'Germany'
}]
let table = '';
data.forEach((row)=>{
table +=`<tr>
<td>${row.company}</td>
<td>${row.contact}</td>
<td>${row.country}</td>
</tr>`
})
function myFunction1(){
data.push({
company:'New Company',
contact:'New Contact',
country:'New'
})
table +=`<tr>
<td>New Company</td>
<td>New Contact</td>
<td>New</td>
</tr>`
document.getElementById('body').innerHTML = table
}
document.getElementById('addjRow').addEventListener("click", myFunction1);
document.getElementById('body').innerHTML = table

<html>
<div id="content">
<table style="width:100%">
 <thead>
 <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  </thead>
  <tbody id="body">
  </tbody>
</table>
<button id="addRow">
Add Row
</button>
</div>

</html>

Всякий раз, когда мы нажимаем кнопку «Добавить строку», весь DOM «tbody» будет обновляться, как показано ниже. Вы можете увидеть темно-синий оттенок при добавлении новой строки в инспекторе браузера.

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

Чтобы свести обновление DOM к минимуму, React использует технику Virtual DOM, он сравнивает текущий VDOM и обновленный VDOM (который будет создан при взаимодействии с пользователем с использованием системы управления состоянием React) и обновляет только конкретный узел DOM, а не все дерево DOM.

Тот же пример таблицы в React

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [data,setData] = useState(
    //Initialize data
    [
    {
      company:'Alfreds Futterkiste',
      contact:'Maria Anders',
      country:'Germany'
    }
  ])
//Add button Handler
  const addRow = ()=>{
    setData((prevData)=>{
      return [
        ...prevData,
        {
          company:"New Company",
          contact:"New Contact",
          country:"New"
        }
      ]
    })
  }
  
  return (
    <div className="App">
      <table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  {/* Render Row */}
  <tbody>
  {data.map((row)=>{
    return (
      <tr key={row.company}>
        <td>{row.company}</td>
        <td>{row.contact}</td>
        <td>{row.country}</td>
      </tr>
    )
  })}
  </tbody>
</table>
  <button onClick={addRow} >Add Row </button>
    </div>
  );
}

Теперь при нажатии кнопки «Добавить строку» добавляется только второй «tr», а не обновляется все тело, в отличие от обновления обычного JavaScript.

Скриншот

Вывод:

Поскольку React использует Virtual DOM для управления обновлением DOM, это повышает производительность нашего приложения, а также предоставляет синтаксис JSX, который упрощает разработку страниц вместо добавления строк HTML, используемых в Plain JavaScript. Есть много других вариантов использования, таких как Одно приложение, отложенная загрузка, рендеринг на стороне сервера и т. д., что улучшит производительность нашего приложения и обеспечит беспрепятственное использование веб-приложения.