ReactJS, будучи одной из самых популярных технологий, присутствует в большинстве контрольных списков повышения квалификации разработчиков.
Зачем реагировать?
Если вы посетили сеанс или прочитали несколько статей, объясняющих, что такое реакция, у вас будет приблизительное представление о том, что это такое. Если нет, то все в порядке
Расскажем простыми словами:
- ReactJS — это библиотека, а не фреймворк.
- Это с открытым исходным кодом. Итак, вам разрешено загружать и использовать его.
- Он позволяет создавать многократно используемые компоненты пользовательского интерфейса.
- Самая привлекательная фича — виртуальный DOM. (https://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/)
При всех своих преимуществах она считается самой используемой библиотекой в 2019 году (см. изображение выше).
С чего начать?
С помощью этого текстового определения давайте рассмотрим препятствия, с которыми вы сталкиваетесь, когда начинаете работу над проектом в React.
Да, это становится сложно, когда вы закончите установку и настройку прокси. Почему?? Продолжайте читать
Определите структуру проекта:
Базовая структура создается с помощью приложения create-реагировать. Вы можете отредактировать его, если это необходимо.
Он похож на любой другой типичный проект javascript.
Но когда вы заходите в основной файл index.js, вы видите код, где синтаксис не является ни строкой, ни HTML. Так что это?? Это JSX. JSX создает элементы реакции.
Когда вы начнете работу с идеей, вы будете знать, какие различные сущности необходимы для проекта.
Например, если вы разрабатываете какое-то приложение, связанное со сбором информации о пользователях, у вас будет
- Форма для приема данных.
- Кнопка для отправки
- Значок для представления пользователя.
- Список, который содержит всю информацию о пользователях.
Все эти сущности становятся компонентами в реакции. Простой. не так ли?
Что ж, давайте лучше разберемся на примере:
В приведенном выше примере:
У нас есть
- Компонент значка пользователя
- Компонент формы
- Отправить компонент кнопки
- Компонент сведений о пользователе
Вы можете заметить, что некоторые данные передаются из компонента формы в компонент сведений о пользователе.
Здесь мы должны знать еще одну концепцию, прежде чем начать работать с компонентами. Это состояние.
Объект состояния — это место, где вы храните значения свойств, принадлежащих компоненту.
UserDetails — это компонент, ваше локальное состояние для компонента может выглядеть так:
- состояние = {число пользователей: «10», userDetails: []}
Любые изменения состояния будут обновлять виртуальный DOM компонента.
Когда обновление происходит в состоянии компонента (предположим, что это родительский компонент), дочерние элементы также должны обновляться.
Не только дочерние компоненты, но и другие компоненты, не относящиеся к поддереву.
Эти обновления происходят только посредством взаимодействий.
Теперь возникает вопрос. Как взаимодействуют эти сущности (компоненты)?
Простой метод, который вы, возможно, знаете, — это взаимодействие родитель-потомок, брат-сестра-брат или любое-любое взаимодействие.
простой, но сложный
Как?
1. Props — путем передачи реквизитов при вызове дочернего компонента. Простыми словами, это именованные аргументы, передаваемые при вызове компонента.
В приведенном выше примере formData :
Компонент формы отправляет данные в компонент сведений о пользователе. Таким образом, компонент формы является родительским, а данные пользователя — дочерними. Передаваемые здесь данные называются реквизитами.
UserDetails — это компонент, он называется, как показано ниже:
- ‹UserDetails name ={"abc"} id = {"1"} contactNumber ={"123"} /›
Ребенок получит к нему доступ как ,
- props.name , props.id , props.contactNumber
2. Методы экземпляра — методы экземпляра дочернего компонента могут быть вызваны родителем с помощью ссылок (https://reactjs.org/docs/refs-and-the-dom.html).
Пожалуйста, обратитесь по ссылке для использования рефов.
3. Функции обратного вызова — типичный обратный вызов JavaScript.
4. Всплывание событий — это не концепция реагирования, это старая концепция, точно так же, как функции обратного вызова, это способ отправки данных от дочернего к родительскому.
Некоторые другие наименее используемые методы: (шаблон Observer, глобальные переменные, контекст и многое другое)
Имея эти многочисленные варианты, выберите удобный в зависимости от ваших требований.
Подождите, это еще не сделано.
Давайте дадим пищу для ваших размышлений прямо сейчас! Что делать, если вы хотите общаться с компонентом, который не находится в поддереве, не является родителем или предком, а находится на каком-то другом уровне дерева?
Затем следует концепция управления потоком данных (не что иное, как управление состоянием).
Прежде чем приступить к рассмотрению процесса, давайте посмотрим, что такое состояние и как оно связано с компонентом.
Если вы слышали о реакции, вы наверняка слышали и о редуксе. Что тогда?
Redux — это контейнер с предсказуемым состоянием для javascript-приложений. (Что означает, что он не ограничен только реакцией).
Поначалу это выглядит сложно, но как только вы настроите один редюсер и сохраните, его довольно просто расширить с помощью любого их количества.
Давайте посмотрим на различные объекты управления состоянием redux:
1. Магазин — здесь будут храниться все данные.
2. Действия. Они позволяют отправлять данные в хранилище. Как правило, это простые объекты javascript, которые имеют тип и пары ключ-значение.
Что-то вроде этого -
тип : «ВХОД»
payload : "user data here.."
}
3. Dispatch — это Redux API, который запускает наши действия.
4. Редукторы — это чистые функции JavaScript. Они принимают действия в качестве своего аргумента и решают, что сохранить в магазине, основываясь на отправленном им действии.
Теперь обратитесь к приведенному выше изображению и обратитесь к определениям. Способен связать? Надеюсь, это «да»
Что ж, теперь давайте посмотрим, с какими проблемами вы можете столкнуться после реализации этих концепций в проекте.
- Решаем, где использовать редуктор, а где нет. (Использование большего количества редукторов может снизить читаемость кода). Итак, будьте осторожны
- Дополнительные действия диспетчера в рамках рендеринга вызывают замедление работы приложения. Поэтому отправляйте только в случае необходимости.
- Хотя использование методов жизненного цикла для некоторых обычных действий javascript выглядит заманчиво, не делайте этого. Они предназначены для выполнения определенных действий. Написание утилит или некоторых действий javascript в нем может ввести в заблуждение цель методов.
- Путаница между реквизитом, поступающим от родителя, и реквизитом из магазина. Оба могут сочетаться и сбивать вас с толку. Итак, давайте правильные имена для обоих, используя их вместе.
Теперь мы находимся на этапе определения преимуществ использования реакции:
Ниже приведены некоторые из них:
- Виртуальный DOM — обновляет только повторно отображаемый компонент, не перезагружая всю страницу.
- Лучшая производительность.
- Больше читаемости и простоты обслуживания.
- Возможность повторного использования кода.
Изучите больше из них во время написания кода.
