Каков наилучший способ обмена пользовательскими данными между компонентами?

Question

У меня есть запрос, т. Е.

  query me {
    me {
      username
      email
    }
  }

Теперь мне нужно поделиться этими данными между компонентами.

Думаю, я могу:

• создать HOC withUserData и обернуть другие компоненты
• создать компонент рендеринга и обернуть другие компоненты jsx

еще?

Answer 1

Это зависит от того, где находятся места, где вы хотите поделиться ими, я имею в виду, если вы хотите поделиться данными в одной и той же ветви дерева компонентов, у вас может быть Контейнерный компонент вверху (который содержит ваш штат и данные передаются с реквизитами на следующие уровни).

Если ваша ветвь компонентов очень сложная и ей нужно пройти по многим уровням , то это неприятно и не рекомендуется, в этом случае рассмотрите возможность использования Context API https://reactjs.org/docs/context.html

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

Пожалуйста, отметьте это, здесь есть несколько лучших практик https://www.toptal.com/react/tips-and-practices

Ну REDUX - это еще один способ, но я бы не рекомендовал использовать REDUX, глядя на ваши потребности.

Когда использовать REDUX?

По сути, вам нужно использовать REDUX, когда сохранение состояния в корневом компоненте верхнего уровня более не достаточно, как, например: (у вас есть две ветви из корневого компонента, один из дочерних компонентов в ветви A хочет получить доступ к некоторому состоянию в дочернем элементе B , затем вам нужно переместить его в корневой компонент и снова передать его, такие случаи подходят для REDUX ).

Answer 2

HOC и реквизит рендеринга - это не то, что вы бы использовали для совместного использования данных между компонентами, поскольку каждый упаковщик будет иметь свой экземпляр данных каждый раз, когда вы создаете компонент, такой как

const MyComponentWithData = withUserData(MyComponent);

Вы будете использовать HOC и реквизит рендеринга в основном для обеспечения функциональности, которая может иметь отношение к нескольким компонентам, таким как detecting click outside of the component или a PrivateRoute for authentication и т. Д.

Однако для обмена данными у вас есть возможность использовать React Context, Flux или Redux. С помощью React redux вы можете хранить данные в хранилище, читать и обновлять данные из компонентов, которые хотят получить к ним доступ. Однако, если ваше приложение не использует Redux и вы хотите обмениваться данными только для части приложения, вы можете просто использовать React Context. Подробнее о том, как его использовать, вы можете прочитать об этом here