React JS — это библиотека javascript, которая помогает разработчику создавать пользовательский интерфейс для веб-сайта. Это упрощает создание интерактивных пользовательских интерфейсов. Это компонентная библиотека. Это также помогает оптимизировать пользовательский интерфейс. Сегодня я расскажу о некоторых фундаментальных темах, связанных с React Js.
- Что на самом деле делает React:вы можете думать о React как о своем агенте. Вы даете Reacts некоторые инструкции, и он будет общаться с DOM, чтобы сделать все остальное. Таким образом, вам не нужно вручную манипулировать javascript DOM. Мало того, он сделает это более эффективно.
- React — это библиотека. Многие из вас могут подумать, что React — это фреймворк. Но это не так. Реакт — это библиотека. Вы можете спросить, в чем разница между фреймворком и библиотекой? Разница между React и фреймворком и библиотекой заключается в том, что фреймворк хочет, чтобы вы выполняли свою работу определенным образом. У вас нет вариантов. Но в этом отношении библиотека очень гибкая. Библиотека очень маленькая, чем фреймворк. Вы можете использовать сторонние инструменты с библиотекой. Так что теперь все больше разработчиков предпочитают использовать библиотеку вместо фреймворка.
- Виртуальный DOM.Виртуальный DOM — это технология, которая делает React таким уникальным. В основном в React при рендеринге кода javascript он создает копию элемента DOM javascript. Когда что-то изменяется, он сравнивает с предыдущим DOM и выясняет, что изменилось, а затем обновляет измененный элемент. Вот главный момент, потому что в обычном javascript, когда что-то меняется, он повторно отображает полный элемент DOM, что делает его неэффективным. Но технология Virtual DOM позволяет намного быстрее и проще манипулировать DOM. Вот почему React такой быстрый.
- Компоненты. Компонент — это основной элемент, обеспечивающий возможность повторного использования. Он делит пользовательский интерфейс на некую простую функцию, которую можно использовать сколько угодно раз. Компоненты — это просто простые функции или классы. Основное различие между ними заключается в том, что компоненты класса имеют встроенное состояние, а функциональный компонент — нет. Таким образом, компоненты класса были лучшим выбором для создания повторно используемых компонентов. Пока не были введены реактивные крючки. Потому что хуки позволяют управлять состоянием в функциональных компонентах. Ну не только можно, но и легко. Функциональные компоненты — это просто простые функции javascript. Таким образом, коды просто элегантны и легки для понимания. В настоящее время функциональные компоненты широко используются из-за их простоты.
- Реквизиты. Компоненты React принимают аргументы в качестве реквизитов. Таким образом, родительский компонент может отправлять свойства дочернему компоненту. Дочерние компоненты могут получить доступ к этим свойствам. Вы можете использовать компоненты с аналогичной структурой много раз, отправляя в компоненты разные реквизиты. В этом прелесть React.
- Крюки.Крюки позволяют нам использовать компоненты класса в функциональных компонентах. Мы можем использовать функциональные компоненты состояния с хуками. Есть много хуков, таких как useState, useEffect, useRef и т. д. Все хуки начинаются с использования.
- JSX:JSX позволяет нам писать HTML-подобный код в реагирующем элементе. Это расширение JavaScript. Его синтаксис похож на HTML, но это не HTML. Браузер не может понять JSX, поэтому он переводится в HTML, чтобы браузер мог его понять. Его синтаксис похож на HTML, но есть небольшие отличия, например, мы используем className вместо class. Элемент JSX использует верблюжий регистр, например onClick, вместо onclick.
- Context API: иногда нам нужно передать свойства слишком много шагов вниз или несколько компонентов нуждаются в свойствах. Таким образом, обычное прохождение реквизита может быть проблемой, и оно может не работать после определенного уровня вниз. Контекстный API упрощает задачу. С контекстным API вам нужно передать реквизит только один раз, и вы можете получить к нему доступ из всех дочерних компонентов.
- Обработчик событий. Обработка событий в React немного отличается от обработки в чистом HTML. Вы должны использовать верблюд позже в React, например, onChange вместо onchange. У него есть еще одно отличие: вместо строки, такой как HTML, он использует функцию для обработки события.
- Ленивый: ленивый загрузчик React позволяет загружать компоненты по мере необходимости. Это означает, что вам не нужно загружать все компоненты сразу. Итак, ваше приложение работает хорошо.