React Context API 和单独的 JS 文件来存储用户数据有啥不同？

Posted 2023-04-14

【中文标题】React Context API 和单独的 JS 文件来存储用户数据有啥不同？

【英文标题】：What is different between React Context API and a separate JS file to store user data?React Context API 和单独的 JS 文件来存储用户数据有什么不同？

【发布时间】：2021-04-19 21:26:04

【问题描述】：

我是 ReactJs 的新手。据我了解，React 上下文 API 用于在组件之间共享数据，以避免在嵌套组件中重复使用 props 传递数据。但我可以用一个简单的单独的 JS 文件来做到这一点。在 JS 文件中，我可以简单地声明一个对象来保存数据，并具有一些函数来更新或获取所有组件中存储的数据。

Context API 和 JS 文件存储用户数据的主要区别是什么？我应该在何时何地使用 React Context API？

【参考方案1】：

React 知道上下文，如果上下文发生变化，使用上下文的组件将重新渲染。

如果你在一个 JS 模块中改变了一个值，React 不会更新组件树。

【讨论】：

另外，在纯 js 文件上处理状态管理也不是一个好习惯，这里有一篇文章可以帮助您确定何时需要使用 Context API blog.logrocket.com/…。

【参考方案2】：

主要和最重要的区别是 React 将重新渲染上下文提供者的所有消费者组件。引用documentation：

只要 Provider 的 value 属性发生变化，所有作为 Provider 后代的消费者都会重新渲染。从 Provider 到其后代消费者（包括 .contextType 和 useContext）的传播不受 shouldComponentUpdate 方法的约束，因此即使祖先组件跳过更新，消费者也会更新。

所以作为一个经验法则。当“全局”状态影响渲染结果时，使用 React Context API。 （这是 99% 的时间，因为 React 就是渲染视图。）

另一个区别是上下文不仅仅是一个单一的全局对象。以如下代码为例：

<Theme.Provider value="light">
  <MyComponent />
  <Theme.Provider value="dark">
    <MyComponent />
  </Theme.Provider>
</Theme.Provider>

这里第一个MyComponent 将使用浅色主题呈现，而第二个MyComponent 将使用深色主题呈现。有多个上下文值同时处于活动状态，嵌套决定使用哪个值。

可能还有很多不同之处，如果您对细节感兴趣，我建议您阅读React Context documentation。