Поскольку вы зашли так далеко, я надеюсь, вы уже знаете, что React — это библиотека JavaScript. Я знаю, что есть много людей, которые спорят, является ли ReactJS библиотекой или фреймворком. Но я не собираюсь участвовать в этом споре.

Согласно официальному сайту ReactJS, React — это библиотека JavaScript для создания пользовательских интерфейсов. Это так просто.

React поддерживается Facebook и сообществом разработчиков с открытым исходным кодом. Начиная с 2013 года, это одна из самых популярных и эффективных front-end библиотек для современной веб-разработки. И день ото дня он становится все популярнее.

Оставим историю в стороне и начнем исследовать природу ReactJS.

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

Итак, как работает ReactJS? Короче говоря, самый интересный механизм — виртуальный DOM. Виртуальный DOM — это просто точная копия реального DOM. React отслеживает этот виртуальный DOM, и всякий раз, когда происходит изменение, React мгновенно обновляет этот виртуальный DOM, сравнивая предыдущий с новым. И тогда только измененная часть визуализируется в реальном DOM с помощью React. Этот процесс сравнения называется React’s Diff Algorithm. Таким образом, в пользовательском интерфейсе обновляется только небольшая часть, а не весь пользовательский интерфейс. Так что до свидания с перезагрузкой страницы.

JSX:

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

За и против:

Хорошо, мы говорим о плюсах и минусах в предыдущем разделе. Как и другие библиотеки, React также имеет некоторые преимущества и недостатки.

Во-первых, взгляните на некоторые из преимуществ-

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

А вот и минусы-

  1. Документы React, похоже, обновляются медленно.
  2. Синтаксис JSX может сбивать с толку некоторых разработчиков.

Реагировать на крючки:

Хуки очень полезны в React, что значительно упрощает работу. Их можно использовать только с функциональными компонентами. Это означает, что хуки нельзя использовать вне функциональных компонентов, в том числе внутри компонентов класса или обычных функций JavaScript.

В React есть несколько хуков. Но самые основные хуки — это useState и useState. Хук useState в основном используется для отслеживания определенного локального состояния в функциональном компоненте. Хук useEffect позволяет реализовать методы жизненного цикла React (componentDidMount, componentDidUpdate и componentWillUnmount).

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

React также позволяет нам создавать собственные хуки. Пользовательский хук позволяет извлекать логику компонента в многократно используемые функции. Это означает, что фрагмент кода можно повторно использовать в нескольких частях приложения. Пользовательский хук — это, по сути, функция JavaScript, и общее соглашение — начинать имя с ключевого слова «использовать».

Жизненный цикл компонента React:

У каждого компонента React есть жизненный цикл, состоящий из трех фаз. Фазы-

  1. Монтирование: указывает на размещение элементов в DOM. Метод componentDidMount() вызывается после рендеринга компонента.
  2. Обновление. Указывает на любое изменение состояния или свойств компонента. Метод componentDidUpdate() вызывается после обновления компонента.
  3. Размонтирование: последний этап жизненного цикла. Метод componentWillUnmount() вызывается, когда компонент собирается удалить из DOM.

И это все на данный момент. Я надеюсь, что в следующий раз я расскажу больше о ReactJS.

Спасибо.