React数据传递 - 使用上下文(Context)-CSDN博客

在典型的 React 应用中，数据通过 props 自上而下传递，但是对于某些类型的 props，比如主题或者首选语言等，这样层层嵌套的传递比较麻烦，中间的组件可能用不到这些 props，这时候使用上下文（Context）不失为一种好的选择。

如何使用 Context

Context 旨在共享一个组件树内可被视为“全局”的数据，使用 context 可以避免通过中间元素传递 props。

创建一个 Context 对象对

每个 Context 对象都附带一个 Provider 组件，后代的使用组件（Consumer）可以订阅 context 的改变。provider 组件通过 value 属性传递给使用组件。每当 value 属性发生变化时，所有后代的使用组件都将重新渲染。

## context 中可以设置默认值
export const DropdownContext = createContext(defaultValue);

## 提供组件
<DropdownContext.Provider value={{ placement: 'bottom-end', anyHandler, }}>
    ...
</DropdownContext.Provider>

## 使用组件
<DropdownContext.Consumer>
    {({ placement }) => {
      ...
    }}
</DropdownContext.Consumer>
复制代码

使用 ContextType

可以将创建的 Context 对象分配给一个类的 contextType 属性，这样可以在这个类的任何生命周期内使用该 Context 中的值。

DropdownMenu.contextType = DropdownContext;

# 使用 this.context
render() {
    const { anyHandler } = this.context;
    ...
}
复制代码

源码示例点这里。