如何在React中使用Context API与Hooks实现跨组件的状态共享

在React中使用Context API和Hooks实现跨组件的状态共享可以通过以下步骤：

1. 创建一个Context对象：

import { createContext } from 'react';

const MyContext = createContext();

2. 在顶层组件中使用Context.Provider提供状态：

import { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

3. 在子组件中使用useContext Hook获取并更新状态：

import { useContext } from 'react';
import MyContext from './MyContext';

const ChildComponent = () => {
  const { count, setCount } = useContext(MyContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

这样，在子组件中就可以直接访问和更新顶层组件中的状态了。这种方式可以实现跨组件的状态共享，避免了props drilling的问题，使代码更加简洁和易于维护。