Одной из самых сложных тем, с которыми я столкнулся на курсе Flatiron School Software Engineering, было понимание потока информации. Когда я применил обучение, в моих знаниях было много сбоев, так как я еще не полностью понял концепцию. Не говоря уже о том, что я был в реальных ситуациях, которые требовали обратного потока данных. В то время это было запутанно и запутанно для меня, но с надлежащей практикой и временем я могу с гордостью сказать, что уверен в своих знаниях этой удобной концепции React и надеюсь пролить свет на эту запутанную тему для других.
Как именно выглядит обратный поток данных?
Обратный поток данных предоставляет родительскому компоненту доступ к информации, расположенной в дочернем компоненте, с помощью функции обратного вызова, определенной в родительском компоненте, переданной дочернему компоненту, а затем вызванной внутри дочернего компонента. Мы можем сделать это для родителей и детей всех компонентов, однако мы не можем передавать информацию от одного ребенка к другому, это важно помнить.
Мы пройдем этапы обратного потока данных, показав примеры с использованием простой функции «переключить темный режим», так что давайте начнем!
- Наша первая задача — нацелиться на родительский компонент. Это будет «Приложение в нашем случае.
- После установки состояния мы создадим функцию с именем "handleDarkModeClick()". это будет наша функция обратного вызова, которую мы используем позже.
3. Теперь мы перейдем ко второй части нашего компонента приложения, где мы фактически передаем функцию обратного вызова нашему компоненту «‹Header /›».
Как видно на фотографии ниже, компонент «‹Header /›» получает «onDarkModeClick={handleDarkModeClick}»в качестве реквизита, передается в наш компонент Header вместе с нашим "toggleMode={isDarkMode}", который ссылается на наше состояние, которое мы сможем установить в "‹Header /›"компонент.
4. Давайте переключимся на наш дочерний компонент «‹Header /›» в файле «Header.js».
5. В дочернем компоненте нам нужно будет выполнить некоторую деструктуризацию объекта, чтобы получить доступ к функции обратного вызова и состоянию.
6. Отлично, теперь, когда мы успешно переместили нашу функцию обратного вызова и состояние вниз, мы можем начать вставлять их значения в наш оператор возврата, который составляет наш компонент «‹Header /›».
7. Используя наш оператор return, подумайте, как мы можем использовать эти объекты (в качестве реквизита) для обработки событий. Для начала нам нужно понять, что нам нужно создать кнопку, которая может обрабатывать обратный вызов «onDarkModeClick».
8. Когда мы создадим кнопку, помните, что мы хотим дать этому событию прослушивание. В нашем примере мы будем использовать событие "onClick={}" и передавать функцию обратного вызова внутри события "onClick" следующим образом:
«‹button onClick={onDarkModeClick}›…‹/button›»
И для развлечения мы создадим троичное выражение внутри кнопки onClick, чтобы при нажатии кнопки состояние проверяло, находится ли состояние нашего тумблера, и читало, является ли оно «истинным или ложным?» затем измените текст кнопок в соответствии с режимом, в котором мы находимся, с «Темного режима» на «Светлый режим» и наоборот.
9. Чтобы создать это динамическое троичное выражение, мы возьмем реквизит «toggleMode», который используется в качестве нашего состояния в компоненте «‹App /›», чтобы изменить значения на основе на какой версии щелкнули.
Это появится между нашей кнопкой так:
“{toggleMode ? «Темный» : «Светлый»} режим»
Когда кнопка нажата, состояние не только будет изменено в функции обратного вызова, чтобы включить наш темный и светлый режим, но также обновит состояние нашего текстового значения внутри кнопки.
Поэтому, когда мы находимся в темном режиме, текст нашей кнопки должен отображать «светлый режим», а когда мы находимся в светлом режиме, кнопка будет отображать «темный режим».
Подведение итогов:
Итак, как этот пример делает информационный поток обратным?
Когда кнопка в нашем компоненте Header нажата, он распознает, что внутри него была вызвана функция обратного вызова, которая просматривает цепочку команд до родителя. Эта отправка информации о событии "click" позволяет передать информацию о дочернем элементе обратно в нашу родительскую функцию обратного вызова для чтения данных, хранящихся в обратном вызове.
Спасибо, что прочитали мой первый пост в блоге, я надеюсь, что это поможет и удачного кодирования ❤!
