如何使用React的Context API来实现跨组件的状态共享？

在React中，Context API是一种用于跨组件共享状态的方法。以下是使用React的Context API实现跨组件状态共享的基本步骤：

1. 创建Context：首先，你需要创建一个Context对象。可以使用React.createContext()方法来创建一个新的Context实例。例如：

import React from 'react';
const MyContext = React.createContext();

1. 提供Context值：将Context对象传递给需要访问该状态的组件。通常，你会在应用的最顶层组件（如App组件）中使用MyContext.Provider组件来提供Context值。例如：

import React from 'react';
import MyContext from './MyContext';

function App() {
  const state = { /* 你的共享状态 */ };

  return (
    <MyContext.Provider value={state}>
      {/* 子组件 */}
    </MyContext.Provider>
  );
}

1. 消费Context值：在需要访问共享状态的组件中，你可以使用MyContext.Consumer组件或useContext Hook来获取Context值。例如：

import React from 'react';
impo