Кевин Кононенко
Если вы видели звездные войны, вы можете понять реквизит и состояние.
Реквизит и состояние необходимы для написания читаемого React Code. Но они жесткие концепции, чтобы понять, потому что они основаны вокруг совершенно другой парадигмы, чем угловой или jQuery (если вы использовали ни один из них).
Но не волнуйтесь – я собираюсь очистить все со звездной войн аналогией.
Верно. Если вы видели оригинальные серии Star Wars, вы можете понять реквизит и состояние.
Вот без споерусного освещения основной предпосылки эпизодов 4-6:
- Дарт Вадир беспокоит повстанцев, так как они последнее сопротивление против Галактической империи.
- Повстанцы, возглавляемые принцессой Leia и Luke Skywalker, должны бороться с обратно и использовать уязвимости в пределах империи.
- Дарт Вадир использует различные тактики, чтобы попытаться обнаружить движения повстанцев, в том числе армию штурмовиков, флотом звездных кораблей и разнообразных разведчиков.
Весь план для ресурсов империи зависит от лидерства Вейдера.
Если вы используете использование jQuery, вы можете подумать о создании одного обработчика событий (например, щелчок () обработчик), а затем явно изменяющий разные части строки пользовательского интерфейса.
Но в реакции идея в том, что когда Государство изменяется, изменения будут автоматически сочинять Для всех дочерних компонентов через реквизит . Поэтому вам нужно только написать код, чтобы изменить одну вещь – Государство – И посмотрите, как ваши обновления пользовательских интерфейсов.
Это похоже на то, как Дарт Вадир командует тремя крыльями своей армии. Как только слово возвращается к нему о местонахождении повстанцев, его ресурсы автоматически мобилизуют, чтобы запустить атаку.
Давайте попадаем в это. В этом руководстве потребуются базовые знания JSX, которые вы можете узнать больше о здесь Отказ
Краткое изложение Галактической империи
Вот три крылья Галактической империи.
Императорская армия состоит из штурмовиков, AT-ATS, AT-STS и других.
Имперский военно-морской флот состоит из звездных эсминцев, галстуков и других.
Военная разведка Состоит из горелых охотников, таких как Боба Фетт, зонд дроиды и любые другие специализированные скауты.
Вот быстрый карта ORG, которая даст некоторое направление на то, как мы напишем наши компоненты.
Напоминание: Первая цель Вейдера – найти местоположение повстанцев. Те, кто внизу графики орг – фактические функциональные блоки, которые могут выполнить это. Если один из них находит базу повстанцев, их инструкции будут возвращаться в Vader, чтобы он мог выполнить свои битвы.
Реагировать все о Динамический пользовательский интерфейс . Когда пользователь завершает конкретное действие, как делает Государство изменение? В этом случае Дарт Вейдер будет иметь Государство называется Rebellocation Отказ Поскольку это ключевая динамическая переменная, три крылья империи будут мобилизовать из-за изменения в Rebellocation штат .
StormTooper сталкивается с базой повстанцев → Вернуться в Дарт Вейдер с местоположением
Пользователь нажимает определенный элемент → Обновить состояние некоторых родительских компонентов
Вот основные основы в коде, который следует за графиком ORG выше:
Государство объяснило
Государство Позволяет динамически изменять много элементов сразу на основе одной переменной. Государство Охватывает ключевые части вашего пользовательского интерфейса, которые меняют базовые на пользовательском входе.
С меньшим количеством вещей, чтобы отслеживать в штате, вы сможете написать компоненты с большим количеством ясности и меньше возможностей для ошибок. При изменении состояния многие компоненты могут измениться в соответствии с одной переменной.
jQuery подходит к этому, просив вас написать одну строку для каждого элемента, который должен быть изменен. Это не явно основано на родительских отношениях, таких как Государство является.
Допустим, штурмовики встречаются с повстанцами. Вейдер приказал им сообщить ему как можно скорее. Как только они вернутся с расположением повстанцев, Vader может провести остальные свои заказы, которые были контингентными на местонахождении повстанцев. Вот модифицированная диаграмма, которая определяет путь через компоненты, перечисленные выше.
Заказы уже передаются каждому члену в нижней части графика. Как только они столкнутся с повстанцами, они знают, чтобы вернуться к лорду Вейдеру. Rebellocation Затем государство будет обновлено с планетой, будь то «эндор», «Хот» или где-то еще.
Это та же концепция, что и получая ввод пользователя, затем обновление состояния в родительском компоненте. Многие практикующие React Pre практикующие выбирают для записи компонентов с помощью сингулярной функции, поэтому компонент, который фактически слушает пользовательский ввод, почти всегда будет отличаться от компонента, который удерживает состояние.
Выше: Штурмовик вложен в неимарармовый вложенный внутри Vadersempire
В настоящем приложении: Пользователь введенный в Net Parent Div вложенный в Parent Div
Что происходит, когда государственные изменения?
Это красота реагирования. Вместо того, чтобы написать сложные обработчики событий (например, в jQuery), все зависит от изменений в состоянии. Вы можете четко следить из изменений в UI для этих изменений этих состояний.
В этом случае однажды Rebellocation Обнаружен, Государство изменится на эту планету. Но это только половина истории. Дарт Вейдер будет иметь в виду планы мобилизовать различные активы на основе этого изменения состояния. Он может заранее подготовиться к этой возможности. Как в: «Когда мы находим свою планету, путешествовать там немедленно и подготовиться к нападению!»
После изменения состояния изменения автоматически разделяются со всеми 3 крыльями империи. Аналогично, когда состояние исходного компонента изменяется, дочерние компоненты автоматически наследуют новое состояние.
Каждый компонент также может иметь свое состояние. Например, Импеарорность Компонент может иметь Органа возможности Государство, которое подсчитывает членов армии. Мы не будем модифицировать это в этом примере, но вы можете представить, что битва может повлиять на Органа возможности Отказ
Обратите внимание, как это состояние не зависит от Rebellocation Отказ Если это сделало, мы не хотели бы явно заявлять о другом состоянии. Мы хотели бы, чтобы он автоматически обновился на основе изменения Rebellocation штат.
Так как он независим, вот как выглядит код:
Подождите, так как это состояние передается между различными компонентами? Это приносит нам … реквизит!
Реквиз объяснил
С нашим корпусом Дарта Вейдера нам на самом деле нужны два набора инструкций, когда дело доходит до командования штурмовиков и других единиц на нижней части нашей таблицы.
Вопрос 1: Что должны делать штурмовики, если они столкнутся с повстанцами?
Отвечать: Сообщите обратно в Дарт Вейдер.
Вопрос 2: Где должны путешествовать штурмовики?
Ответ: Если Повстанцы не были найдены, ищите галактику наугад. Еще , пойдите в местоположение повстанцев, чтобы атаковать их.
Реквизит Позвольте нам постоянно контролировать Rebellocation Государство и закажите движение войск, если государственные изменения. Rebellocation это строка. Но как насчет заказов, которые должны произойти, когда они изначально находят повстанцы?
Мы можем передать функцию как реквизит также! Это означает, что мы можем передавать обратный вызов к каждому штурмовизу, который будет выполнять, если этот солдат обнаруживает цель. На следующем рисунке вы можете следить по пути, изложенному «заказами», чтобы проследить реквизит Отказ
В типичном пользовательском интерфейсе, скажем, что пользователь нажимает кнопку, и вы хотите обновить состояние родительского компонента. Вы также должны пройти обратный вызов от этого родительского компонента, который будет запускаться на клик пользователя. Этот обратный вызов может затем обновить состояние потому что он возник с тем же родителем, который устанавливает состояние .
Это важно, поэтому давайте рассмотрим этот код строки:
Строка 8: Мы создаем команду для штурмовиков, которые они должны немедленно вернуться с локалом повстанцев, когда они находят его.
Линия 19 : Мы передаем команду всей армии через обновление реквизит .
Линия 32 : Императорская армия передает эту команду каждому штурмовизу с идентичным обновлением реквизит Отказ
Линия 42 : Мы создаем функцию обнаружения, чтобы мы могли пройти значение ввода в обратный вызов () (), когда он срабатывает.
Линия 53 : Когда штурмовик находит местоположение, он вызывает функцию DiscoverLocation (), поэтому мы можем вернуть местоположение через UptateLocation (). Это обновляет Государство в Vadersarmy родительский компонент.
Другие примечания: Мы прошли восстание вплоть до каждого штурмовика. В этом руководстве мы ничего не сделаем с этой информацией, но в будущем вы можете себе представить, что может быть использовано для сдвига местонахождения всех солдатов к базе повстанцев.
Последний рекап
- Дарт Вейдер дает каждому члену Галактической империи по заказу: если вы найдете повстанцев, немедленно сообщите со мной. В коде это функция в родительском языке Vadersarmy. Компонент, который затем передается каждому ребенку через реквизит .
- Армия, военно-морские и военные Intel (три подразделения империи) передают эту инструкцию для каждого отряда, снова через реквизит Отказ
- Каждый член империи есть инструкции. Когда они сталкиваются с повстанцами, они будут использовать обратный вызов, чтобы передать местоположение, чтобы вернуться в Дарт Вейдер, который обновит всю империю с новостями одновременно и подготовиться к бою. Этомитает динамический ввод пользователя, который меняет Государство исходного компонента.
Если вам понравилось этот пост, вы также можете наслаждаться моим Другие объяснения сложных темов CSS и JavaScript, таких как позиционирование, контроллер моделей-контроллеров и обратных вызовов.
И если вы думаете, что это может помочь другим людям в том же положении, что и вы, дайте ему «сердце»!
Оригинал: “https://www.freecodecamp.org/news/react-props-state-explained-through-darth-vaders-hunt-for-the-rebels-8ee486576492/”