Вы поймете основные концепции реакции.
1. Что такое Реакт?
Многие думали, что react — это JavaScript-фреймворк. Это неправильно, react — это библиотека JavaScript для создания пользовательского интерфейса (UI). Существует две версии React: ReactJS и React Native. ReactJs используется для разработки веб-приложений, а React Native — для создания мобильных приложений для IOS и Android.
2. Реагировать на виртуальный DOM
Что такое реактивный виртуальный дом? Перед этим давайте узнаем о реальном DOM. DOM (объектная модель документа) — это программный интерфейс для документов HTML и XML.
Виртуальный DOM: когда браузер загружает веб-сайт, за кулисами происходит какая-то работа. Например, HTML → Анализ → Приемник контента → Модель контента → Конструктор фреймов → Дерево фреймов → Печать → Отображение. Это работа с HTML, то же самое с этим CSS → синтаксический анализатор CSS → правила стилей → конструктор фреймов → дерево фреймов, печать → отображение с кодами HTML. Работа происходила HTML и CSS вместе.
3. JSX
Большинство людей думали, что JSX и HTML — это одно и то же. Но нет двух разных вещей. JSX — это JavaScript XML, и это расширение, которое позволяет писать HTML в React. В основном это JavaScript. Но HTML — это язык разметки для документов, предназначенных для браузеров.
Для расширения JSX мы можем записать HTML-ссылку в код JavaScript. Это упростило нашу жизнь кодирования.
4. Компоненты
В ReactJ есть два типа компонентов. Компонент класса и функциональный компонент.
Если я скажу легко, компонент реакции - это функция javascript. На reactJs в функцию мы возвращаем содержимое JSX (JavaScript XML), которое преобразуется в HTML с помощью babel, а коды передаются в основной HTML-файл в корневой div и отображаются в браузере. В компонентах мы можем передавать данные от родительского компонента к дочернему компоненту. И данные идут вниз, как будто мы можем отправлять данные от родительского к дочернему компоненту, но от дочернего к родительскому невозможно. Если мы хотим сделать это, мы должны использовать систему управления состоянием.
5. Реквизит
«Props» — это специальное ключевое слово в reactJs, props означает свойства. Реквизиты — это аргументы для передачи данных в реагирующие компоненты. Которые используются для передачи компонентов данных другому компоненту. Данные идут вниз, то есть мы можем передать данные родительского компонента дочернему компоненту.
const myComponent = (props) =› {console.log(props)} // родительский компонент передает данные, а этот компонент получает данные через реквизиты.
6. Контекстный API
Управлять состоянием в реагирующем приложении сложно. Для управления состоянием мы использовали сторонние технологии, такие как Redux, MobX и т. д., что было очень неудобно. React думал, что мы должны сделать вещь, которая управляет состоянием с помощью React, и нам не нужно использовать сторонние технологии. Затем React сделал контекстную систему API в реакции. Вот почему теперь мы можем легко управлять состоянием с помощью контекстного API.
7. Состояние
Когда мы используем веб-сайт, нам нужно перейти со страницы на другую, щелкнув ссылку. Чтобы включить эту функцию на веб-сайте, вы должны знать об управлении состоянием. Вот почему вы можете использовать сторонний инструмент, такой как redux. С редуксом вы можете управлять состоянием, но это сложно. Чтобы избежать сложностей, вы можете легко использовать контекстный API.
8. Реагировать на хуки
В React версии 16.8 в React добавлены хуки. Это позволяет использовать состояние и другие функции React без написания класса. Хуки не используются внутри классов. Хуки также удобны для бэкенда, что означает, что они не содержат никаких критических изменений. Если вы пишете функциональный компонент, а затем хотите добавить к нему некоторое состояние, вы можете сделать это, используя хук внутри существующего функционального компонента.
9. Реагирующий маршрутизатор
В вашем одностраничном приложении очень важен react-router. Маршрутизатор React определяет все страницы для лучшего взаимодействия с пользователем. Если какой-либо пользователь хочет изменить маршрут, он щелкнет ссылку с изменяемым маршрутом, и пользователь будет перенаправлен на страницу. Компоненты маршрутизации лечения react-router является основной частью вашего сайта. Если вы хотите установить реактивный маршрутизатор на свой веб-сайт, запустите его в своем терминале:
Для npm → установить npm react-router-dom
Для пряжи → пряжа добавить react-router-dom
10. Оптимизация производительности React
Для повышения производительности нам нужно выполнить некоторые шаги и поддерживать их. Во-первых, необходимо использовать неизменяемые структуры данных, несколько файлов фрагментов, удалять ненужные исходные коды, использовать встроенный элемент содержимого, оптимизацию зависимостей, использовать компоненты более высокого порядка, избегать определения встроенной функции в функции рендеринга. Если вы сделаете это, вы сможете повысить производительность своего приложения для реагирования.
