React - известная библиотека JavaScript. Как новичок, вы можете спросить, что мы будем строить, отреагировав. По сути, response - это декларативная, эффективная и гибкая библиотека JavaScript, используемая для создания пользовательских интерфейсов (UI). То, что мы видим в веб-приложении или браузере, называется пользовательским интерфейсом (UI). В этой статье я рассмотрю основы реакции.
React - это не фреймворк.
React - это не фреймворк. Есть много споров о реакции. Это фреймворк или библиотека? React - это не совсем фреймворк. Фреймворк - это законченное решение. Все, что вам нужно для создания вашего приложения, встроено. Фреймворк обычно хочет, чтобы вы все кодировали определенным образом. Если вы попытаетесь отказаться от этого пути, фреймворк обычно начинает ссориться с вами по этому поводу. Но в ответ у вас не будет всего необходимого для создания приложения. Вам нужно подключить другую библиотеку, чтобы выполнить свою задачу. Библиотеки более гибкие в работе.
JSX В РЕАКЦИИ
Мы можем создавать элементы HTML с помощью Javascript. Но это довольно хлопотно. React js упрощает нам задачу. Вы можете создавать элементы HTML с помощью JSX. JSX - это, по сути, расширение синтаксиса обычного JavaScript и используется для создания элементов React. Синтаксис JSX выглядит как синтаксис HTML. То, что мы пишем в JSX-рендере в React DOM. Перед отображением в браузере JSX компилируется компилятором в React. JSX power full, затем строка шаблона Javascript.
- Он выполняет оптимизацию при переводе на обычный JavaScript.
- Это упрощает нам создание шаблонов.
- Вместо того, чтобы разделять разметку и логику на отдельные файлы, React использует для этой цели компоненты.
Компонент
В React мы описываем пользовательский интерфейс с помощью компонентов, которые можно использовать повторно, компоновать и сохранять состояние. Мы можем сравнивать компоненты с помощью простой функции. Мы можем вызвать функцию с некоторым вводом, и она возвращает некоторый вывод. Мы можем повторно использовать функцию, когда нам нужно, и составить большую функцию из более мелких. Компоненты React такие же. Их вывод - это набор свойств, а их вывод - это описание пользовательского интерфейса. Мы можем повторно использовать один компонент в нескольких пользовательских интерфейсах, а компоненты могут содержать другие компоненты.
Есть 2 вида компонентов: 1. функциональный компонент и 2. компонент на основе классов.
Виртуальный DOM
Виртуальная модель DOM - это облегченная копия реальной модели DOM. Сохраняется в памяти. Когда некоторые части DOM изменяются, react сравнивает измененный DOM с Virtual DOM, который сохраняется в памяти. Для сравнения используется алгоритм Деффера. Алгоритм может определить, где произошли изменения, и обновить только эту часть DOM. Изменение или обновление всего DOM происходит немного медленнее. Виртуальный DOM быстро меняет DOM.
КРЮЧКИ
Хуки - это особый вид функций, которые используются в компонентах реакции. Некоторые из них могут использоваться для обеспечения функционального компонента с элементами с отслеживанием состояния, такими как useState. Другие можно использовать для управления побочными эффектами, такими как useEffect. Все функции хуков начинаются со слова «использовать». Функции перехватчика React могут использоваться только в функциональных компонентах. Вы можете использовать их в компонентах класса.
Состояние
Состояние - это объект, содержащий некоторую информацию, которая может изменяться за время жизни компонента. Состояние - это наблюдаемый объект, используемый для хранения данных, который может быть изменен в будущем. Только состояние можно использовать в компонентах на основе классов. Обработчик событий может изменять состояние.
Реквизит
React позволяет нам передавать информацию Компоненту, используя так называемые свойства (props). Props - это в основном глобальная переменная или объект. Мы можем передавать свойства любому компоненту, поскольку мы объявляем атрибуты для любого тега HTML. Props можно использовать как в классовых, так и в функциональных компонентах.
React декларативен
Мы описываем UI с помощью React и говорим ему, что мы хотим. React позаботится о том, чтобы делать все, что мы хотим. Он переводит наше декларативное описание в пользовательский интерфейс в браузере. Это общий язык между разработчиками и браузерами, который позволяет разработчикам декларативно описывать пользовательские интерфейсы и управлять своим состоянием.
Оптимизация производительности
React использует несколько методов, чтобы минимизировать количество дорогостоящих операций DOM, необходимых для обновления пользовательского интерфейса. Использование React приведет к быстрому пользовательскому интерфейсу без особых усилий по оптимизации производительности. Для оптимизации производительности мы можем использовать следующие методы:
. Используйте производственную сборку.
Бранч.
.Browsrify.
.Свернуть.
.WebPack.
.Профилирование компонентов с помощью профилировщика инструментов разработчика
.Виртуализировать список строк.
Избегайте примирения.
Условный рендеринг
В React мы можем рендерить компоненты условно. Обычно мы делаем условный оператор, используя if-else. В JSX мы не можем использовать if-else для условного оператора. Но мы можем использовать тернарный оператор для визуализации условных компонентов. Мы можем использовать if-else перед возвратом с помощью вспомогательной функции.
Вот и все.
Увидимся в другом блоге. :)
