Как компоненты могут обновлять друг друга, находящиеся в разных ветках

Я хочу обновить компонент Diagram, если я нажму на Button. У меня есть следующая структура:

               +------+                          
               -Layout|--\                       
             -/+------+   |                      
           -/             \                      
    +-----/---+       +----|----+                
    | Sidebar |       | Content |                
    +--|------+       +----|----+                
      /                     \                    
  +---|---+             +---|----+               
  |Button |             |Diagram |               
  +-------+             +--------+ 

Если я нажму кнопку, диаграмма должна обновиться. Мой единственный идея, как я могу это сделать, заключается в следующем:

  1. Я определяю функцию changeDiagram() в компоненте Layout.
    • функция changeDiagram изменяет переменную с именем type на значение 'barChart'
  2. Я передаю changeDiagram в качестве параметра боковой панели. Если я нажму на кнопку, функция changeDiagram будет выполнена.
  3. Я передаю переменную type, которая находится в компоненте Layout, в качестве параметра компоненту Content.
  4. Компонент Content отображает новую диаграмму

Проблема в том, что я не хочу определять функцию, которая отвечает только за диаграмму внутри компонента макета. Также каждый компонент между макетом и диаграммой визуализируется, что не обязательно.

Как решить эту проблему? Я слышал о реакции-редуксе. Должен ли я использовать это или есть другие решения?

Использование Контекстный API (использование redux или другой библиотеки для этих случаев, вероятно, является излишним) может быть хорошим способом, потому что вы можете определить данные/логику с помощью Diagram, а затем импортировать их в Layout. В качестве альтернативы вы можете использовать описанный вами подход, но определить логику в хуке, чтобы она не была определена в Layout, но использовалась в Layout.

Henry Woody 03.04.2022 18:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
47
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Единственное решение без избыточности (или контекстного API) — там.

Если вы хотите отображать только необходимый компонент, вам придется использовать избыточность и его хранилище. ИЛИ вам придется использовать Контекстный API

отступать — еще один хороший выбор
よつば 03.04.2022 18:19
Ответ принят как подходящий

Ответ на этот вопрос тесно связан с самой внутренней природой React:

  • В проекте React используются модульные блоки, называемые компонентами.
  • Компоненты можно вкладывать друг в друга и использовать повторно, и как только вы начнете их компоновать, вы получите дерево компонентов, как показано на рисунке.
  • Это дерево обрабатывается реакцией в виртуальном DOM, прежде чем оно отобразится в реальном DOM.
  • React использует так называемое React State, чтобы запустить алгоритмы согласования и сравнения, чтобы понять, когда и что нужно для повторного рендеринга определенных ветвей дерева компонентов.

С этой предпосылкой вы понимаете, что если вы хотите, чтобы ваша кнопка запускала повторную визуализацию диаграммы, вам нужна кнопка для изменения состояния реакции, хранящегося в макете (который является нижним общим родителем) или в компоненте, который является родителем для макета. Вот почему React выполняет повторный рендеринг с потоком сверху вниз, например, изменение состояния на боковой панели будет повторно отображать только боковую панель и кнопку, а не макет.

  • Существуют различные возможные подходы к решению этой проблемы, и выбор зависит от множества различных факторов. Обычно в больших приложениях, где у вас есть сотни или тысячи компонентов, и у вас будет множество методов, которые взаимодействуют с одним и тем же состоянием, используя Redux. — лучший подход, так как это один из самых надежных, проверенных и надежных менеджеров глобальных состояний. Это решает ваши проблемы, поскольку с Redux у вас будут глобальные действия, которые изменяют ваше глобальное состояние, поэтому вам не нужно беспокоиться о том, где объявлены эти функции или как передать их вашим вложенным дочерним элементам, поскольку вы можете отправлять эти действия из любого места. в вашем приложении, и вы можете получить состояние таким же образом без необходимости детализировать его с реквизитами от родителя к дочернему через ваше приложение.
  • React предлагает инструмент, позволяющий иметь состояние и обработчики, доступные в ваших компонентах, без необходимости прокачивать их через ваши компоненты и их контекст. Контекст полезен для библиотек или небольших приложений, где Redux или другие менеджеры состояний просто добавляют в проект ненужные зависимости. Изменение контекста вызовет повторную визуализацию всего дерева в любом случае до вашего ребенка, вы можете избежать промежуточных повторных визуализаций, используя оболочку React.memo().
    Вы можете проверить пример это.

How to solve this problem? I heard of react-redux. Do I have to use this or are there other solutions?

Итак, это зависит от вас, если вы планируете иметь много этих сценариев, да, вам, вероятно, понадобится менеджер состояний, Redux, Recoil, Valtio, Zustand, их много. То, что лучше подходит для вашего случая, зависит от многих факторов, просто попробуйте их и посмотрите, какой из них вам больше нравится.

Спасибо за этот обзор!

swftowu69 08.04.2022 00:12

Другие вопросы по теме