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

在典型的 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;
    ...
}
复制代码

源码示例点这里。