Поскольку вы зашли так далеко, я надеюсь, вы уже знаете, что 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 также имеет некоторые преимущества и недостатки.
Во-первых, взгляните на некоторые из преимуществ-
- React прост в освоении и прост в использовании.
- Приложения React работают быстро благодаря использованию виртуального DOM.
- React имеет компонентную архитектуру, что делает его многоразовым.
А вот и минусы-
- Документы React, похоже, обновляются медленно.
- Синтаксис JSX может сбивать с толку некоторых разработчиков.
Реагировать на крючки:
Хуки очень полезны в React, что значительно упрощает работу. Их можно использовать только с функциональными компонентами. Это означает, что хуки нельзя использовать вне функциональных компонентов, в том числе внутри компонентов класса или обычных функций JavaScript.
В React есть несколько хуков. Но самые основные хуки — это useState и useState. Хук useState в основном используется для отслеживания определенного локального состояния в функциональном компоненте. Хук useEffect позволяет реализовать методы жизненного цикла React (componentDidMount, componentDidUpdate и componentWillUnmount).
Хук useEffect обычно используется для получения данных, и по умолчанию эффект запускается один раз после каждого рендеринга. Таким образом, чтобы контролировать, как и когда должен запускаться эффект, необходимо внедрить зависимость в хук useEffect, что называется условным срабатыванием.
React также позволяет нам создавать собственные хуки. Пользовательский хук позволяет извлекать логику компонента в многократно используемые функции. Это означает, что фрагмент кода можно повторно использовать в нескольких частях приложения. Пользовательский хук — это, по сути, функция JavaScript, и общее соглашение — начинать имя с ключевого слова «использовать».
Жизненный цикл компонента React:
У каждого компонента React есть жизненный цикл, состоящий из трех фаз. Фазы-
- Монтирование: указывает на размещение элементов в DOM. Метод componentDidMount() вызывается после рендеринга компонента.
- Обновление. Указывает на любое изменение состояния или свойств компонента. Метод componentDidUpdate() вызывается после обновления компонента.
- Размонтирование: последний этап жизненного цикла. Метод componentWillUnmount() вызывается, когда компонент собирается удалить из DOM.
И это все на данный момент. Я надеюсь, что в следующий раз я расскажу больше о ReactJS.
Спасибо.