Reactjs 在哪些情况下，我应该在react中使用上下文，它是如何工作的？

我完成了一些教程，但仍然没有听懂。我有这些问题：在哪里使用它，它是如何工作的（举个例子）。

上下文用于您希望与多个组件共享某些全局状态的情况。设置初始状态，然后将其作为值传递给上下文提供程序。上下文提供程序包装您希望访问该状态的所有子组件

它可以在各种情况下使用。下面是一个简单而愚蠢的例子：

您希望对web应用程序中的所有按钮使用相同的颜色。可以使用上下文将该颜色传递给所有子组件。 如果您需要更改所有按钮的颜色，只需在一个位置进行更改

例如：

//App.js

// Create a Context
export const ColorContext = React.createContext();
// It returns an object with 2 values:
// { Provider, Consumer }

//set up an initial state
let initialState = {color: 'red'};

function App() {
  // Use the Provider to make a value available to all
  // children and grandchildren
  return (
    <ColorContext.Provider value={initialState}>
      <div>
        <Display />
      </div>
    </ColorContext.Provider>
  );
}

//Child Component
//import useContext and the context variable defined in App.js
import React, { useContext } from 'react';
import { ColorContext } from './App.js';
// ...

function Display() {
  const value = useContext(ColorContext);
  return <div style={{ color: value.color }}>The color is {value.color}.</div>;
}

//App.js
//创建上下文
export const ColorContext=React.createContext（）；
//它返回一个具有2个值的对象：
//{提供者，使用者}
//建立初始状态
让initialState={color:'red'}；
函数App（）{
//使用提供程序使值对所有人可用
//儿孙
返回(
);
}
//子组件
//导入useContext和App.js中定义的上下文变量
从“React”导入React，{useContext}；
从“./App.js”导入{ColorContext}；
// ...
函数显示（）{
常量值=useContext（ColorContext）；
返回颜色为{value.color}。；
}