我添加了 github demo click here。

usecontext挂钩

有时我们使用道具将数据传递到父母。这是一个复杂的过程，如果我们需要通过许多组件将它们通过许多组件，这也是不便的。 React上下文API 提供了一种在React组件树中共享数据的方法。

用法：

• 深入将数据深入到树上。
• 树的一部分上下文。
• 在传递对象和功能时优化重新渲染。
• 更新通过上下文传递的数据。
• 指定后备默认值。
• usecontext可以将数据传递给我们的整个应用程序，也可以在应用程序的任何部分使用。

句法：

const value = useContext(SomeContext)

让我们尝试 usecontext 使用简单的应用程序。让我们更改一些字体大小，并尝试了解其数据流。

最终结果

首先，我们需要使用 react.createcontext 创建上下文，并且此上下文将传递给挂钩。我创建了一个名为Context的文件夹，并在文件夹中放置一个文件 index.js

import { createContext } from "react";

//initial fontSize as 16.
const fontSizeContext = createContext(16);
export default fontSizeContext;

在上面的代码中，我们使用了 createContext 并设置初始值16 。它分配给fontsizecontext常数并导出为默认值。

什么是createcontext
它创建一个上下文对象，并用于确保每个级别（内部树）上的每个组件都可以使用相同的上下文获取数据。

让我们对 app.js 文件进行一些更改。

import FontSizeContext from "./Context/context";
import { useState } from "react";
import UseContextExample from "./UseContextExample";

const App = () => {
  const [size, setSize] = useState(16);
  return (
    <FontSizeContext.Provider value={size}>
      <div style={{ width: '500px', margin: 'auto' }}>
        <UseContextExample />

        <button onClick={() => setSize(size + 5)}>Increase font size</button>
        <button
          onClick={() =>
            setSize((prevSize) => Math.min(prevSize - 5))
          }
        >
          Decrease font size
        </button>
      </div>
    </FontSizeContext.Provider>
  );
};
export default App;

在上面的代码中，我们使用字体大小 context.provider value = {size} 在此处，我们用 fontsize context.provider.provider 将组件包裹起来，使我们的 size/em value 可用于树内的每个组件。

我们还添加了两个按钮，一个按钮增加了 降低尺寸。每当有人单击按钮时， 更新其状态和更改字体大小的值 ，然后传递到整个组件树。因此，任何组件都可以轻松访问字体大小的值。

import { useContext } from "react";
import fontSizeContext from "../Context/context";
const UseContextExample = () => {
    const size = useContext(fontSizeContext);
    return <p style={{ fontSize: `${size}px` }}>font size now {size}px</p>;
};
export default UseContextExample;

在上述代码中，我们使用
const size = useContext(fontSizeContext);获取字体大小的值。此组件可以可以轻松访问字体大小的数据/值，因为它在组件树中留在中。

我添加了 github demo click here。

今天就这样。参见yaaa。