React Context API 和单独的 JS 文件存储用户数据有什么区别？

Question

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

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

Answer 1

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

如果您更改 JS 模块中的值，React 将不会更新组件树。

Answer 2

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

All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes. The propagation from Provider to its descendant consumers (including .contextType and useContext) is not subject to the shouldComponentUpdate method, so the consumer is updated even when an ancestor component skips an update.

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

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

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

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

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

React Context API 和单独的 JS 文件存储用户数据有什么区别？

What is different between React Context API and a separate JS file to store user data?

javascript

reactjs

react-context