1. Что такое React?
React - это интерфейсная библиотека JavaScript для создания пользовательского интерфейса. Другими словами, Reactjs - это компоненты. Например, если вы думаете о React, то на самом деле думаете о c компоненте. ”
2. Что такое компонент?
Компонент - это небольшой фрагмент пользовательского интерфейса. Попробуем разобраться, изучив рисунок. Прежде всего, это основной компонент (или родительский компонент) под названием компонент APP. Этот компонент приложения содержит четыре дочерних компонента или разделен на четыре компонента:
- Заголовок
- Боковая панель
- Содержание
- Нижний колонтитул
Функция каждого компонента будет обрабатываться независимо от других компонентов. Каждый компонент представляет собой деталь многократного использования, и вы можете рассматривать каждый компонент отдельно.
Пример Youtube:
Компонент приложения состоит из трех компонентов:
- Компонент заголовка содержит (панель навигации, значок, панель поиска, значки и т. Д.)
- Компонент боковой панели содержит (список значков, библиотеки, подписки и т. Д.)
- Компонент содержимого содержит (список видео и т. Д.)
поэтому всякий раз, когда вы получаете данные после поиска в каком-либо видео, эти данные могут обрабатываться независимо только в компоненте заголовка.
3. Что такое состояния и свойства?
Состояния:
Давайте сначала поговорим о состояниях. Состояние - это живая переменная приложения.
Есть два типа состояний:
- Состояние на уровне компонентов
- Состояние уровня приложения (Redux)
Сейчас мы обсудим первый тип, то есть состояние уровня компонентов, и попытаемся понять его на примере.
Как видите, здесь мы взяли пример панели поиска Youtube. Когда вы открываете Youtube, и вам нужно что-то искать. поэтому изначально Поиск пуст (т.е. Search = ””). Теперь вы выполняете поиск по запросу Видео о спорте, поэтому тогда значением поиска будет Видео о спорте (т. е. Поиск = "Видео о спорте") и все виды спорта будут показаны похожие видео. Аналогично для двух других, например, если вы ищете обучающие видео или танцевальные видео, будут показаны уважаемые видео. Здесь Поиск - это переменная состояния. Здесь необходимо понимать, что вы постоянно меняете значение поиска, и по этой причине мы называем его живой переменной.
Реквизит:
Реквизит - это то, что переносит одни и те же данные на протяжении всего своего жизненного цикла. Каждый раз, когда вы устанавливаете значение props один раз, оно не изменится после. Давайте разберемся с этим на примере:
Картина разделена на две части. Давайте обсудим обе части по очереди.
- На первом рисунке здесь выделены два компонента: Компонент панели поиска и Компонент содержания. Результат поиска в компоненте Searchbar будет отображаться в компоненте содержимого. Это своего рода отправка данных от одного компонента к другому. Здесь в игру вступают реквизиты. Данные не будут изменены в другой компонент.
Например, если данные A отправляются из компонента A в компонент B, поэтому данные не будут изменены в компоненте B (давайте попробуем разобраться во второй части) .
- На втором изображении пользователь выполняет поиск по запросу Спортивное видео. В результате этого запроса спортивные данные готовы к отправке и отображению в Компоненте содержания из Компонента панели поиска. Как я уже говорил ранее, эти данные не будут изменены, так же как спортивные данные не будут изменены на какие-либо другие данные, такие как данные об образовании и т. Д. Данные, которые отправляются из компонента SearchBar и должны отображаться в Компонент содержания - это спортивное видео, и он никогда не изменится. Весь этот механизм с помощью реквизита легко сделать.
