useContext

用于在函数组件中获取全局上下文（context）的值。

在 React 中，不同级别的组件之间传递属性值，必须逐层传递，即使中间层的组件不需要这些数据。

useContext 允许组件在组件树中的任何位置访问共享的数据，而不必一层层地通过 props 传递。

假设我们有三个组件：TopComponent、MiddleComponent 和 BottomComponent，我们的目标是从 TopComponent 向 BottomComponent 传递数据。

index.tsx

import React, { createContext } from 'react';
import MiddleComponent from './middle-component';

export const GlobalContext = createContext({});

function TopComponent() {
  const person = { name: "Alice", age: 18 };

  return (
    <GlobalContext.Provider value={person}>
      <MiddleComponent />
    </GlobalContext.Provider>
  );
}

export default TopComponent;

middle-component.tsx

import React from 'react';
import BottomComponent from './bottom-component'


function MiddleComponent() {

  return (
    <BottomComponent />
  );
}

export default MiddleComponent;

bottom-component.tsx

import React, { useContext } from 'react';
import { GlobalContext } from '.';

function BottomComponent() {
  const person = useContext(GlobalContext);
  
  return (
    <div>
      <p>Name: {person.name}</p>
      <p>Age: {person.age}</p>
    </div>
  );
}

export default BottomComponent;

多个子组件共享数据值

<XxxContext.Provider value={{}}>
    <ComponentA />
    <ComponentB />
    <ComponentC />
</XxxContext.Provider>