Vue Provide/inject 使用的回顧 Provide/inject 不是響應式的
基本用法：
接下來 2 個例子只工作在 Vue 2.2.1 或更高版本。低於這個版本時，注入的值會在 props 和 data 初始化之后得到。
在 2.5.0+ 的注入可以通過設置默認值使其變成可選項
注意點：provide 和 inject 綁定並不是可響應。然而，如果你傳入了一個可監聽的對象，那么其對象的屬性還是可響應的。
React Context：
主要說明：
Context 提供了一個無需為每層組件手動添加 props，就能在組件樹間進行數據傳遞的方法。
Context 主要應用場景在於很多不同層級的組件需要訪問同樣一些的數據。請謹慎使用，因為這會使得組件的復用性變差。
如果你只是想避免層層傳遞一些屬性，組件組合（component composition）有時候是一個比 context 更好的解決方案。
下面是使用的方法：
步驟1：const MyContext = React.createContext(defaultValue);只有當組件所處的樹中沒有匹配到 Provider 時，defaultValue 參數才會生效。注意：將 undefined 傳遞給 Provider 的 value 時，defaultValue 不會生效；
步驟2：<MyContext.Provider value={/* 某個值 */}> 當 Provider 的 value 值發生變化時，它內部的所有消費組件都會重新渲染。Provider 及其內部 consumer 組件都不受制於 shouldComponentUpdate 函數
步驟3：內層組件 MyClass 訪問 Context 的值，
首先給class設置contextType屬性，值就是React.createContext創建的對象：MyClass.contextType = MyContext;（如果你正在使用實驗性的 public class fields 語法，你可以使用 static 這個類屬性來初始化你的 contextType。）
然后內部就可以使用 this.context 訪問了，掛載在 class 上的 contextType 屬性會被重賦值為一個由 React.createContext() 創建的 Context 對象。你可以在任何生命周期中訪問到它，包括 render 函數中。
圖片說明：
步驟1：
步驟2：
函數組件使用
函數組件使用可以通過 Consumer 的方式；React.createContext 其實是返回一個對象，對象有一個Consumer的key,const {Provider, Consumer} = React.createContext(defaultValue);
這個函數接收當前的 context 值，返回一個 React 節點。傳遞給函數的 value 值等同於往上組件樹離這個 context 最近的 Provider 提供的 value 值。如果沒有對應的 Provider，value 參數等同於傳遞給 createContext() 的 defaultValue。
具體例子：
