React — это простая библиотека JavaScript, созданная на чистом ванильном JavaScript и разработанная Facebook в 2013 году. Основная цель библиотеки — создание интерактивных пользовательских интерфейсов. React JS обычно используется для создания одностраничного веб-приложения. Если сравнивать библиотеку с другими библиотеками или фреймворками, то React JS играет лучше других, и на сегодняшний день это одна из самых популярных библиотек JavaScript в мире. Что происходит за кулисами, давайте рассмотрим.

ДОМ

Дом обозначает объектную модель документа. Когда мы запускаем HTML-шаблон или документ через браузер, браузер анализирует HTML-документ в виде древовидной структуры, где дерево представляет собой набор узлов HTML.

Когда мы изменяем какие-либо элементы в HTML-документе, браузер обновляет документ, используя dom. Используя DOM браузера, мы можем манипулировать нашими документами. Посмотрите, как работает DOM браузера

Реагировать на виртуальный DOM

Мы знаем, что DOM браузера анализирует документ HTML в древовидной структуре, и когда мы обновляем любой контент в документе, он отображает весь DOM и запускается в браузере. Что является медленным и длительным процессом. Если реагирующий виртуальный DOM сначала повторно визуализирует DOM, когда происходят какие-либо изменения, затем он сравнивает реальный DOM и обновляет только те узлы, которые необходимо обновить. Таким образом, преимущество виртуального DOM заключается в том, что он не перерисовывает весь DOM. Что делает наше приложение быстрее. См. пример

Подробнее о согласовании дерева React

Давайте узнаем, как работает виртуальный DOM реакции за кадром. Когда мы говорим React отобразить документ, он создает виртуальное представление документа или дерева объектов и после этого сохраняет виртуальное представление в памяти. Если в элементах реакции происходят какие-либо изменения, реакция создает другое виртуальное представление древовидной структуры и сравнивает оба виртуальных представления, чтобы узнать, где произошли изменения. React находит изменения, используя алгоритм, который называется алгоритмом сравнения.

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

Этот процесс известен как согласование дерева React и эффективно работает с DOM браузера.

React работает как посредник между DOM браузера и пользователем. См. пример

Основные методы API приложения React

Когда мы запускаем шаблон HTML в браузере, DOM анализирует шаблон как строку, но в реакции он анализирует как дерево объектов, где объекты в элементе реакции обычно возвращаются функциональным компонентом. Мы обсудим это позже.

В идеале реагирующее приложение запускается на основе двух основных методов API.

1.ReactDom.рендер

2.React.createElement

Без этих основных методов реагирующее приложение не может быть запущено. Давайте подробно рассмотрим эти методы API.

ReactDom.render

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

  • Он всегда проверяет в приложении, что отображать в DOM браузера. Хотя он отображает реагирующие элементы, которые представляют собой дерево объектов.
  • Он спросит реагирующий DOM, где отображать реагирующий элемент в браузере.

Мы обсудим за кадром метод API ReactDom.render позже.

ReactDom.createElement

Элемент React — это виртуальный элемент в React, возвращаемый компонентом для отображения в виде дерева объектов в DOM браузера. ReactDom.createElement обычно создает элемент реакции в компонентах реакции. Давайте посмотрим на пример

Компоненты в React?

Компоненты — это простые функции JavaScript в React. Где он возвращает значения, как обычные функции. В качестве возвращаемого значения компоненты React возвращают элементы реакции. Но между обычными функциями и реагирующими компонентами есть простое различие: обычная функция может возвращать значение undefined. Но компонент React не может возвращать значение undefined. Его реагирующие компоненты не возвращают никакого значения. Реагирующий DOM вернет нулевое значение.

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

В React есть два типа компонентов

  • Компонент класса
  • Функциональный компонент

Компонент класса

В реакции мы можем создать компонент, используя класс, класс похож на класс JavaScript с небольшими отличиями. Если мы посмотрим на картинку

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

Функциональный компонент

Другой способ создать компонент в реакции — использовать функцию. Чтобы сделать компонент с состоянием в реакции, нам пришлось использовать синтаксис класса, и это был единственный способ. И это было так сложно, но в версии 16.8 реакции, выпущенной в 2019 году. Мы можем создать компонент, используя функцию, и мы также можем сделать компонент удобным способом с сохранением состояния, используя хуки реакции. И я думаю, что из-за этого использование классовых компонентов падает в наши дни. Если мы увидим пример

Здесь мы видим, что нам не нужно использовать метод render() для рендеринга элемента реакции, и мы можем получить доступ к значению состояний без использования этого ключевого слова. Например, в версии 16.8 есть много возможностей, которые реагируют на них.

JSX с Babel

JSX — это расширение JavaScript, которое позволяет нам писать HTML в файле JavaScript, используя специальный синтаксис. Обычно, когда мы пишем HTML на JavaScript, который должен возвращать функциональный компонент, в идеале это не HTML, мы используем JSX для возврата вызовов функций, которые создают элемент реакции. Но браузер не понимает JSX, и для этого React использует транспилер для перевода JSX в вызовы React.createElement.

Теперь вопрос, что такое транспилятор? Что ж, компилятор, который переводит одну форму синтаксиса в другую, называется транспайлером. Есть два транспилятора, которые люди используют в реакции

Бабель и TypeScript. Обычно реакция использует babel в качестве транспилятора для рендеринга элемента реакции.

Поэтому, когда мы создаем приложение с помощью create-react-app, приложение по умолчанию внутренне использует транспайлер babel. Давайте посмотрим на изображение ниже

Узнайте больше о React Hooks

Хуки React — это функция недавно выпущенной версии React 16.8. Хуки обычно представляют собой особый тип функций. Хуки React позволяют нам создавать состояние без использования компонента класса. Название каждого хука начинается со слова «использовать». В идеале некоторые хуки используются для предоставления элементов с состоянием с функциональными компонентами, такими как «useState», а некоторые используются для управления побочными эффектами в реакции. Давайте посмотрим на некоторые хуки в версии реагирования 16.8.

Хуки React можно использовать только в функциональных компонентах. Его нельзя использовать в компоненте класса

В React есть три основных хука.

1.useState()

2.использовать эффект()

3.использоватьконтекст()

Давайте подробнее рассмотрим крючки для более глубокого понимания

useState()

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

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

использовать эффект()

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

  • Функция обратного вызова
  • Массив зависимостей

Если мы посмотрим на изображение примера

Из изображения мы ясно поняли, что хук useEffect использовался для получения данных из API. И данные будут извлекаться на основе его зависимостей, установленных для массива. Когда в хуке возникнут побочные эффекты, функция обратного вызова возвращает значение на основе своих зависимостей.

использоватьконтекст()

Хук обычно используется, когда нам нужно обмениваться общими данными в различных компонентах без отправки реквизитов по отдельности от родительских компонентов к дочерним компонентам. Хук также известен как контекстный API. Если мы увидим пример ниже

На изображении видно, что для использования хука useContext нам нужно создать контекстный API с помощью функции createContext, помните, что контекстный API должен быть объявлен в общем родительском элементе всех компонентов. См. пример

И отправьте значение контекста в качестве провайдера. Когда компоненту необходимо получить данные из контекстного API. Эту работу можно выполнить с помощью хука useContext. См. пример ниже

Реагировать на реквизит

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

Как мы видим на примере. Значения реквизита деструктурируются вручную и используются в элементе реакции.

Методы жизненного цикла React

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

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

  • Оказывать()
  • компонентDidMount()
  • компонентDidUpdate()
  • компонентWillUnmount()
  • долженОбновитьКомпонент()

Если вы хотите узнать больше о методах жизненного цикла, просто перейдите по этой ссылке.

Вывод

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

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