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

859

在典型的 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;
    ...
}

源码示例点这里