React 第二十章 Hook useContext

React 的 useContext 是一个用于在组件之间共享数据的新特性。它可以解决组件嵌套层级较深时，传递 props 变得复杂和冗余的问题。

Context 提供了一种在组件之间共享数据的方式，而不必通过中间组件传递 props。它可以让我们在组件树中的任何地方获取到共享的数据。

使用 useContext 的步骤如下：

1. 创建一个 Context 对象，可以通过 createContext 方法来创建。例如：const MyContext = React.createContext()
2. 在父组件中通过 Provider 组件包裹需要共享数据的组件，并通过 value 属性将数据传递给子组件。例如：<MyContext.Provider value={data}>...</MyContext.Provider>
3. 在子组件中通过 useContext 方法来获取共享的数据。例如：const data = useContext(MyContext)
4. 然后就可以在子组件中使用这个数据了。

注意事项：

• 如果要使用 useContext，必须要有一个对应的 Provider 组件包裹在最顶层或者某个需要传递数据的组件内。
• 可以通过 createContext 的参数传递一个默认值，当没有找到对应的 Provider 时，会使用这个默认值。

简单示例

// src/context/index.js

import React from "react";

const MyContext = React.createContext();
export default MyContext;

首先，使用 React.createContext API 创建的一个上下文对象，该对象里面会提供两个组件，分别是 Provider 和 Consumer，表示数据的提供者和消费者。

// App.jsx
import ChildCom1 from "./components/ChildCom1";
import MyContext from "./context";
import { useState } from "react";

const { Provider } = MyContext;

function App() {
  const [count, setCount] = useState(0);
  return (
    <Provider value={{ count, setCount }}>
      <div style={{
        border: '1px solid',
        width: "250px",
      }}>
        <ChildCom1 />
      </div>
    </Provider>
  );
}

export default App;

在根组件 App.jsx 中，我们设置了一个根组件的状态数据 count，然后从 MyContext 中解构出 Provider 组件来作为数据的提供者，value 属性用来设置要提供的数据。

import { useContext } from 'react';
import { MyContext1 } from "../context";
function ChildCom2() {
    const { count } = useContext(MyContext)
    return (
        <div
            style={{
                border: '1px solid',
                width: "200px",
                userSelect: 'none'
            }}
        >
            ChildCom2
            <div>count : {count}</div>
        </div>
    );
}

export default ChildCom2;

ChildCom2 组件是一个函数组件，函数组件想要获取 Context 上下文中的数据，可以使用 useContext Hook，这个函数接收当前的 Context 上下文，并返回Context 上下文中的数据。

---

总结

React 的 useContext 提供了一种在组件之间共享数据的简便方式，避免了传递 props 的繁琐和冗余。