React 使用 Context 子组件传数据给父组件 父组件获取子组件的数据

React 中的 Context API 主要用于解决组件间的深度嵌套状态管理问题，特别是当子组件需要向远在树形结构之外的父组件传递数据时。Context 提供了一种将共享数据向上“推”到组件树的方式，而无需通过 prop 链一层层地往下传递。

**父组件获取子组件的数据流程：**

1. **创建 Context**: 创建一个名为 `MyContext` 的上下文对象，通常是一个自定义的 JavaScript 类或对象，包含你要共享的数据。

const MyContext = React.createContext();

2. **提供数据**: 在父组件中作为 `Provider` 提供这个 Context 数据。

import { Provider } from 'react-redux'; // 或者 import MyContext from './MyContext';

<Provider store={store} value={<MyContext.Provider value={{ data: 'from child' }} />} >
  {/* 子组件 */}
</Provider>

3. **使用数据**: 子组件通过 `<MyContext.Consumer>` 消费数据。

<MyContext.Consumer>
  {(data) => (
    <ChildComponent data={data.data} /> {/* 子组件可以接收到并使用数据 */}
  )}
</MyContext.Consumer>

4. **子组件传递数据给父组件**: 如果有特殊情况，子组件想直接将数据传递给父组件，它可以直接通过 prop 将数据返回，但是这种方式并不推荐，因为违背了 Context 的初衷。

**相关问题--:**
1. 如何避免在大型项目中过度使用 Context？
2. React Context 和 Redux 这两种状态管理方案有何区别？
3. 当组件不再需要从 Context 中接收数据时，应该如何处理？