Узнать о ReactJS

ReactJS — это бесплатная внешняя библиотека JavaScript с открытым исходным кодом для создания пользовательских интерфейсов на основе компонентов пользовательского интерфейса. Он используется для создания одностраничных приложений и позволяет нам создавать многократно используемые компоненты пользовательского интерфейса. React был создан Джорданом Уоке, инженером-программистом Facebook. Ранняя версия React называлась FaxJS и размещалась в новостной ленте Facebook.

Давайте посмотрим, как реакция работает с веб-браузерами.

Как работает реакция? — React не манипулирует DOM браузера напрямую. Он создает виртуальный DOM в памяти для выполнения всех необходимых манипуляций перед внесением изменений в DOM браузера. Все данные приложения хранятся в одном месте, и эти данные передаются только от родителя к дочернему (а не наоборот). Потоки данных от родителя называются реквизитами. React служит представлением архитектуры MVC. Веб-страницы в данных веб-приложения могут быть изменены с течением времени без перезагрузки всей страницы.

Пример фрагмента кода компонента

import React from "react";
import Tool from "./Tool";
const Example = () => {
  return (
    <>
      <div className="app">
        <Tool name="React App" />
      </div>
    </>
  );
};
  
export default Example;

Жизненный цикл компонентов

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

Инициализация

• Здесь путешествие компонентов пользовательского интерфейса начинается с настройки состояния и реквизита. Обычно это делается внутри метода конструктора класса пользовательского интерфейса.

class Initialize extends React.Component {
constructor(props)
{
// Calling the constructor of
// Parent Class React.Component
super(props);
// initialization process
this.state = {
date : new Date(),
clickedStatus: false
};
}

Монтаж

• На этом этапе компоненты React монтируются в DOM. (Создание компонентов и вставка их в DOM). В фазе доступны два метода.

componentWillMount() — вызывается непосредственно перед монтированием компонента в DOM или вызовом метода рендеринга.

componentDidMount() — вызывается после монтирования компонента в DOM.

Обновление

• Это третий этап, когда данные компонентов обновляются в ответ на пользовательские события, такие как набор текста, нажатие и т. д. Доступные методы на этом этапе:

долженОбновитьКомпонент()

компонентВиллудате()

КомпонентDidUpdate()

Размонтирование

• Это последняя фаза жизненного цикла компонента, когда компоненты отключаются от DOM.

компонентWillUnmount()

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

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

Преимущества ReactJS

· Простота в освоении и использовании

· Многоразовые компоненты

· Хорошая производительность за счет виртуального DOM

Недостатки ReactJS

· Высокие темпы развития

· Плохая документация

· JSX как барьер

Надеюсь, вы многое узнали о React из этой статьи.