React Context Hook vs 将数据直接引入组件

Posted 2023-02-22

【中文标题】React Context Hook vs 将数据直接引入组件

【英文标题】：React Context Hook vs Bringing Data Directly into Components

【发布时间】：2020-07-17 20:46:05

【问题描述】：

我非常喜欢使用 React 钩子，而且我也喜欢在 Firebase 之上进行开发。

鉴于 Firebase 的实时数据库功能，我倾向于将给定 React 组件所需的数据直接调用到组件本身或邻近的父组件中，而不是将数据拉入 Redux 存储之类的东西或通过 React useContext hook API 进入组件。

是否有某些原因我不应该只是将数据拉入组件中，并且经常使用 useState 挂钩将其存储在该组件的状态中？对于许多应用程序来说，通过 Redux 甚至通过 useContext 挂钩将某些组件使用的数据拉入应用程序范围的状态似乎有点过头了。

您能否帮助我理解我的想法是否正确，以及是否存在使用 useContext 挂钩更有意义的情况（除了明显的用例，如应用主题或皮肤）。我只是在决定对我的组件采用哪种方法时遇到了麻烦。

谢谢，

戴维斯

【参考方案1】：

您所描述的方法的主要缺点是可能会进行多次冗余调用。如果多个组件需要相同的数据，您将花费不必要的资源多次获取该数据。这就是 React 的 Context API 旨在解决的问题。如果您有一个user 对象和两个需要知道用户的name 的组件，您可以将用户对象存储在上下文中，然后在整个应用程序中访问该上下文，只调用一次来获取用户。

【讨论】：

所以您认为，通常情况下，最好通过 useContext 挂钩将数据引入组件，对吗？

是的！它可以防止不必要的冗余查询