Я хочу обновить компонент Diagram
, если я нажму на Button
.
У меня есть следующая структура:
+------+
-Layout|--\
-/+------+ |
-/ \
+-----/---+ +----|----+
| Sidebar | | Content |
+--|------+ +----|----+
/ \
+---|---+ +---|----+
|Button | |Diagram |
+-------+ +--------+
Если я нажму кнопку, диаграмма должна обновиться. Мой единственный идея, как я могу это сделать, заключается в следующем:
changeDiagram()
в компоненте Layout
.
type
на значение 'barChart'
changeDiagram
в качестве параметра боковой панели. Если я нажму на кнопку, функция changeDiagram будет выполнена.type
, которая находится в компоненте Layout, в качестве параметра компоненту Content
.Проблема в том, что я не хочу определять функцию, которая отвечает только за диаграмму внутри компонента макета. Также каждый компонент между макетом и диаграммой визуализируется, что не обязательно.
Как решить эту проблему? Я слышал о реакции-редуксе. Должен ли я использовать это или есть другие решения?
Единственное решение без избыточности (или контекстного API) — там.
Если вы хотите отображать только необходимый компонент, вам придется использовать избыточность и его хранилище. ИЛИ вам придется использовать Контекстный API
Ответ на этот вопрос тесно связан с самой внутренней природой React:
С этой предпосылкой вы понимаете, что если вы хотите, чтобы ваша кнопка запускала повторную визуализацию диаграммы, вам нужна кнопка для изменения состояния реакции, хранящегося в макете (который является нижним общим родителем) или в компоненте, который является родителем для макета. Вот почему React выполняет повторный рендеринг с потоком сверху вниз, например, изменение состояния на боковой панели будет повторно отображать только боковую панель и кнопку, а не макет.
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, их много. То, что лучше подходит для вашего случая, зависит от многих факторов, просто попробуйте их и посмотрите, какой из них вам больше нравится.
Спасибо за этот обзор!
Использование Контекстный API (использование redux или другой библиотеки для этих случаев, вероятно, является излишним) может быть хорошим способом, потому что вы можете определить данные/логику с помощью
Diagram
, а затем импортировать их вLayout
. В качестве альтернативы вы можете использовать описанный вами подход, но определить логику в хуке, чтобы она не была определена вLayout
, но использовалась вLayout
.