使用 React Context API 时是否应该将不相关的上下文单独存储?
Should unrelated context be stored separately when using the React Context API?
我正在构建一个 Web 应用程序,它需要将多个状态存储在上下文中,因为它们是全局需要的。为此,我使用 React Context API(而不是 Redux)。
我有一个 store 文件夹,它是我的 components 文件夹的同级文件夹,其中我目前有一个文件存储我的 loggedIn
状态。我现在处于要添加其他上下文元素(当前语言、用户 XP 等)的位置。
存储这些元素的最佳做法是什么?
- 理想情况下,我会将其存储在与
loggedIn
状态相同的文件(最好是相同的对象)中,并使用相同的提供程序,使用缩减器有选择地更新状态。
- 但是,我看到其他人为每个不相关的上下文片段创建单独的、单独的文件。在我看来,这似乎效率低下,因为它需要包含额外的提供程序、额外的导入和更多的样板代码。只拥有一个集中的上下文提供程序不是更好吗?
每种方法的优缺点是什么?
(如果这不是 Stack Overflow 的合适问题,请告诉我,我会删除它)
请记住,只要上下文的值发生变化,使用该上下文的每个组件都必须重新呈现。因此,如果你有一个单一的整体上下文,以一个大对象作为它的值,那么对对象的一部分的更改将强制重新渲染只关心对象不同部分的组件。
因此,具有单个上下文可能是一个性能问题。缓解这种情况的一种方法是将其拆分为更小的环境,每个环境都专注于一个领域。如果较小的上下文值发生变化,那么该上下文的使用者仍将需要重新呈现,但这可能是需要的,因为这些组件很可能会关心更改。
我正在构建一个 Web 应用程序,它需要将多个状态存储在上下文中,因为它们是全局需要的。为此,我使用 React Context API(而不是 Redux)。
我有一个 store 文件夹,它是我的 components 文件夹的同级文件夹,其中我目前有一个文件存储我的 loggedIn
状态。我现在处于要添加其他上下文元素(当前语言、用户 XP 等)的位置。
存储这些元素的最佳做法是什么?
- 理想情况下,我会将其存储在与
loggedIn
状态相同的文件(最好是相同的对象)中,并使用相同的提供程序,使用缩减器有选择地更新状态。 - 但是,我看到其他人为每个不相关的上下文片段创建单独的、单独的文件。在我看来,这似乎效率低下,因为它需要包含额外的提供程序、额外的导入和更多的样板代码。只拥有一个集中的上下文提供程序不是更好吗?
每种方法的优缺点是什么?
(如果这不是 Stack Overflow 的合适问题,请告诉我,我会删除它)
请记住,只要上下文的值发生变化,使用该上下文的每个组件都必须重新呈现。因此,如果你有一个单一的整体上下文,以一个大对象作为它的值,那么对对象的一部分的更改将强制重新渲染只关心对象不同部分的组件。
因此,具有单个上下文可能是一个性能问题。缓解这种情况的一种方法是将其拆分为更小的环境,每个环境都专注于一个领域。如果较小的上下文值发生变化,那么该上下文的使用者仍将需要重新呈现,但这可能是需要的,因为这些组件很可能会关心更改。