Когда я должен назначать независимые состояния дочерним функциям (используя хуки) в реакции?

Question

Я делаю небольшой проект в React, который имеет три дочерних компонента

1. форма для ввода данных, а затем эти данные отправляются на сервер
2. Другая форма для ввода ключа а затем получить соответствующее значение с сервера
3. Отображение в реальном времени текущих данных, присутствующих на сервере

На данный момент я объявил все состояния, требуемые в этом проекте, в функции, которая является родитель всех функций, упомянутых выше.

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

каким должен быть правильный подход к объявлению состояний в приведенном выше примере проекта? ИЛИ как правильный подход к проектированию архитектуры для состояний в целом?

Answer 1

В целом и правильный способ объявить состояния - это определить их внутри функционального (родительского) компонента. Поскольку вы используете ловушку, вы можете использовать React.useState () для определения своих состояний.

Например,

const [state, setState] = React.useState(initialState);

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

setState(newState);

Answer 2

Обычно переменная состояния создается в большинстве родительских компонентов, которым необходимо прочитать / изменить состояние.

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

Answer 3

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

Что касается управления состоянием, это зависит от ваших потребностей. Обычно я люблю реализовывать contextApi для работы со своими вещами, но это всего лишь выбор, потому что я должен обмениваться данными между несколькими компонентами. Если вы уверены, что ваше приложение не станет толстым, тогда обработка локального состояния - неплохое решение, это проще реализовать.