如何在 React 中使用上下文

欢迎回来，朋友们！


今天我们将回顾名为 usecontext 的 react hook 的基础知识。 usecontext 是一个强大的工具，它比 usestate 更进一步，创建了一个类似全局的 state，可以将信息传递给子组件和孙组件，而无需直接传递 props。

但我有点超前了。
如果你不熟悉 usestate，请先跳过去阅读我之前的文章，然后再回来准备大吃一惊！


如何使用“usestate”：https://dev.to/deborah/how-to-use-state-in-react-2pah

现在您已经了解了“usestate”，让我们深入了解“usecontext”！

什么是 usecontext？：

usecontext 非常适合需要放置在全局范围内的数据（例如使某人在整个应用程序中保持登录状态的用户名），但它并不是最终的快捷方式将 props 传递给子组件。
然而，usecontext 允许我们在不直接传递 props 的情况下传递数据，因此当我们遇到需要由多个子组件访问或在整个应用程序中可用的数据时，usecontext 非常有用。

为了让 usecontext 启动并运行，我们需要执行两个步骤：首先，我们需要创建一个上下文对象（'createcontext'），然后我们需要使用钩子 'usecontext' 通过提供者访问该值。

以下示例已进行简化，以便让您更好地了解 usecontext 的含义以及如何使用它，但您应该注意 createcontext 通常在其自己的单独文件中声明。然而，我将“parent.js”比作典型的“app.js”文件（组件层次结构顶部的组件）。 parent.js 是我定义所有状态变量、更新这些状态变量的函数，并使用 useeffect 获取数据库的地方。我选择在顶级组件中声明 createcontext，而不是创建自己的文件，以简化此说明，以便您可以更好地理解 context 的核心概念。

话虽如此，让我们从头开始：createcontext！

1.我们需要做的第一件事是声明并导出一个名为“context”的变量，稍后我们将在子组件中使用该变量[我们现在正在创建一个变量，以便使我们的代码更简单，因此我们可以将稍后访问其中的值（数据）]：

export context = react.createcontext();

‘context’是通过调用‘createcontext’创建的上下文对象。上下文对象包含一个名为 provider 的组件，我们现在可以调用该组件，然后传递我们想要保留在“全局”级别的变量和函数。

2. 使用“context”变量，现在让我们跳到 return 语句中的 jsx。在这里，我们将调用“context”并将其包装在开始标签（尖括号）中，并像这样调用 provider：

return(
    <context.provider>
        // other jsx &amp; the child components we want to hand context to.

    </context.provider>
);

为了完成'context.provider'，我们还需要为'provider'提供一个值。我们将在这里传递一个带有所有变量和函数的对象，我们将在子组件中使用“context”调用这些变量和函数：

return(
    <context.provider value="{{" example setexample handleexample>
        // other jsx &amp; the child components we want to hand context to.

    </context.provider>
);

非常重要的是要注意，我们需要将所有将使用变量和函数的子组件放在标签之间。例如：

return(
    <context.provider value="{{" example setexample handleexample><child></child><components></components><go></go><here></here></context.provider>
);

请注意，我们不需要将任何 props 直接传递给子组件（就像我们使用“usestate”一样），只要我们将 props 放在“value”中即可。

现在我们已经使用了 createcontext 并将所有全局项传递给“context.provider”，我们准备好继续讨论子组件并了解如何使用“context”。

3. 让我们看看一个子组件，它（为了本示例）位于文件“child.js”中。正如编码的生活一样：如果你想使用某些东西，你需要导入它。让我们继续从“parent.js”中声明它的位置获取“context”，以便我们可以在这个子组件（“child.js”）中使用它：

import context from ‘./parent.js’;

4. 现在我们可以访问子组件中的“context”，现在需要将“usecontext”导入到文件中，以便我们可以将“context”传递给它（稍后会详细介绍）：

import react, { usecontext } from ‘react’;
import context from ‘./parent.js’;

5. 太棒了！现在让我们使用“usecontext”。首先我们需要声明一个变量来使用“usecontext”。我们将在组件内部以与声明 usestate 类似的方式执行此操作：

import react, { usecontext } from ‘react’;
import context from ‘./parent.js’;

function child(){
    const { example, setexample } = usecontext(context)

    // the rest of our code

在此代码中，我们使用大括号 {} 来表示解构赋值。这是一种奇特的说法，我们可以调用存储在 context 中的多个变量和函数。我们还将“context”传递给“usecontext”，以便我们可以访问 context.provider 中定义的值（我们在“parent.js”中声明）。



6. 不管你信不信，你已经准备好了！您现在可以在代码中使用上下文值，就像通常使用 state 一样。例如：

const expid = example.id;

或

setexample(newexample);

让我们回顾一下：

恭喜！您现在拥有开始使用 createcontext 和 usecontext 的所有工具。您了解 usecontext 允许您创建某种“全局状态”，可以将变量和函数传递给组件，而无需直接通过子组件传递 props。

我们还深入研究了在应用程序中获取上下文所需的六个步骤。您现在已准备好开始使用 createcontext 和 usecontext 进行编码，但如果您需要快速入门指南，请看这里：

在父组件中，使用“createcontext”声明并导出一个名为“context”的变量：

export const context = react.createcontext();

在父组件的 jsx 中，将所有需要访问上下文的子组件包装在 context.proivder 中，并在对象内传递任何变量/函数：

<context.provider value="{{" example setexample handleexample>
   //child components
</context.provider>

在您的子组件中，导入“usecontext”：

import react, { usecontext } from ‘react’;

还从父组件导入“context”：

import context from “./parent.js’;

然后使用 usecontext 并将其传递给您的“context”变量：

const { example, handleExample } = useContext(Context);

最后，使用您现在可以访问的上下文（在上面的示例中，这将是“example”和“handleexample”），但是您需要在子组件中使用。

干得好！下次再见，祝您编码愉快！

最后一点，如果您想深入研究这个主题，这里是我在学习 usecontext 和撰写此博客时参考的官方文档资源：

官方文档：
https://react.dev/reference/react/createcontext

遗留的官方文档，对于理解usecontext还是有一定帮助的：https://legacy.reactjs.org/docs/context.html