Question

新的React Context API很棒，但是我似乎总是想办法在React组件之外访问它。当您位于React函数组件或React类组件内部时，一切都很好，但是当您需要从上下文中读取或重置值（例如，由于在提取函数中发生的异步操作），没有简单的方法可以做到这一点。

那么，有没有办法在React组件外部访问React Context Consumer中的值？

以后编辑：我继承了一个基于Redux的项目，并逐渐过渡到该项目。在动作创建者中，我有一个注销功能，可以清除商店的内容：

export const logoutRequest = () => dispatch => {
  navigate('Welcome')
  // Reset apollo data
  client.resetStore()
  persistor.purge()
  // Reset context api data HERE
  //
}

我可以轻松地在调用注销请求的组件中创建使用者，但是这种情况发生在3个不同的组件中，我不想在那里重复代码。

Answer 1

不，您不能。更新上下文的唯一方法是更改发送到Context.Provider的值。

对于异步操作，通常将结果保存在根组件（或提供程序所在的组件）中，并更改发送的值。或者，您可以在上下文中制作一个函数，如下所示：https://reactjs.org/docs/context.html#updating-context-from-a-nested-component

Answer 2

您最终会在组件中调用logoutRequest()吗？如果您不想重复代码，则可以创建一个自定义钩子：

const useLogout = () => {
  const resetContext = React.useContext(SomeContext);
  const logoutRequest = () => dispatch => {
    navigate('Welcome');
    client.resetStore();
    persistor.purge();
    resetContext();
  };
  return logoutRequest;
}

然后，您可以在组件中调用const logoutRequest = useLogout()。您也可以为异步操作做类似的事情。

Answer 3

React 上下文仅在 UI 可用时可用。这意味着在后台任务中您无法访问它。但这并不意味着您不能在组件的“外部”访问它。

我将举一个例子，说明您可以和不能在组件外使用它：

不可能：你有一个预定的后台任务（使用操作系统机制）来做一些工作（也许是获取一些东西），通常发生的情况是操作系统只唤醒应用程序的一部分（假设应用程序处于退出状态）处理后台任务，这样 UI 就不会被加载（并干扰用户当前正在做的事情） - 所以这里的上下文将不可用
可能：您有一个网络套接字，用于侦听来自服务器的事件（可能是聊天），当事件到达时，您希望更新上下文。这是可能的，因为 web sockets 不能在后台运行（当 UI 被用户/系统抛弃时 - 退出状态）在本机（特别是）中。这样做的方法是用一个类包装套接字事件处理程序，并用上下文调度函数对其进行初始化（保存为类的私有属性）。在同一范围内，处理程序可以访问此私有属性以更新上下文。

对背景状态的更深入解释：

您应该将 3 个背景状态分开

退出 - 应用从未打开（自上次手机启动以来）或被系统抛弃以释放一些资源。在这种状态下，应用程序不允许执行任何代码，只有当它被系统调用时（例如计划任务）。
背景 - 应用已打开但失去了用户的注意力（例如切换到另一个应用）。 UI 仍然在内存中并且可用（包括上下文），并且所有应用程序的代码都可以继续运行。在 iOS 上，这种状态是不可能的，而在 Android 上，这在有限的时间内是可能的，通常在此之后操作系统将退出应用程序。
前台 - 应用已打开并处于用户的焦点中。在这里，几乎一切皆有可能。

在React组件之外使用React Context

3 个答案: