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

Question

我有一个问题，即：

  query me {
    me {
      username
      email
    }
  }

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

我想我可以：

创建 HOC withUserData 并包装其他组件
创建一个 render prop 组件并包装其他组件 jsx

还有吗？

Answer 1

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

这样的组件时，每个包装器都会有不同的数据实例

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

Answer 2

这取决于你想共享它们的地方，我的意思是如果你想在组件树的同一个分支中共享数据，你可以有一个 Container Component在顶部（保存您的状态并传递数据 props 到下面的级别）。

如果你的组件分支非常复杂并且它需要向下移动许多级别那么它很痛苦并且不推荐这种情况下，考虑使用 Context API https://reactjs.org/docs/context.html

我不会为此推荐 HOC，HOC 不是为了共享数据，而是为了共享可重复使用的功能 .

请检查这个，这里有很多最佳实践 https://www.toptal.com/react/tips-and-practices

好吧 REDUX 是另一种方式，但我不建议使用 REDUX 来查看您的需要。

什么时候使用 REDUX？

基本上，当保持顶级根组件中的状态不再足够时，您需要使用 REDUX，例如 :( 您从根组件中有两个分支，子组件之一是branch A 想要访问 branch B 的子节点中的一些状态，那么你需要将它移动到根组件并再次向下传递，这种情况适用于 REDUX ).

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

what's the best way to share user data between components?

reactjs

apollo-client