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;
    ...
}
複製代碼

源碼示例點這裏。