在组件之间共享用户数据的最佳方法是什么？

Question

我有一个查询，即：

  query me {
    me {
      username
      email
    }
  }

现在我需要在组件之间共享此数据。

我想我可以：

• 创建HOC withUserData ，并包装其他组件
• 创建一个渲染道具组件，并将其他组件包装成jsx

其他吗？

Answer 1

这取决于您要在何处共享它们，我的意思是，如果您要在组件树的同一分支中共享数据，则可以在顶部有一个 Container Component （容器组件保持您的状态，并将数据具有道具传递到以下级别）。

如果您的组件分支非常复杂，并且需要下降很多级别，那么这很痛苦，也不建议这样做，在这种情况下，请考虑使用Context API https://reactjs.org/docs/context.html

为此，我不建议使用 HOC ，HOC并不是要共享数据，而是要共享可重复使用的功能。

请选中此选项，这里有许多最佳做法https://www.toptal.com/react/tips-and-practices

很好的 REDUX 是另一种方法，但是我不建议您使用REDUX来满足您的需求。

何时使用REDUX？

基本上，当将状态保留在顶级根组件中不再足够时，您需要使用REDUX，例如：（您从根组件中有两个分支，分支中的一个子组件< strong> A 想要访问分支 B 的子级中的某些状态，那么您需要将其移至根组件，然后再次将其传递给下一级，这种情况很适合 REDUX ）。

Answer 2

HOC和Render属性不是用来在组件之间共享数据的东西，因为每当创建

之类的组件时，每个包装器都会有不同的数据实例。

const MyComponentWithData = withUserData(MyComponent);

您将主要使用HOC和Render道具来提供与detecting click outside of the component或a PrivateRoute for authentication等多个组件相关的功能。

但是，为了共享数据，您可以选择使用React Context，Flux或Redux。通过使用React redux，您可以将数据保存在存储中，并从想要访问它的组件中读取和更新数据。但是，如果您的应用程序未使用Redux，而您只想共享应用程序一部分的数据，则可以简单地使用React Context。有关如何使用它的更多详细信息，请阅读here