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. Есть много других вариантов использования, таких как Одно приложение, отложенная загрузка, рендеринг на стороне сервера и т. д., что улучшит производительность нашего приложения и обеспечит беспрепятственное использование веб-приложения.