看到網上都是老版的context，發一篇最新的context的使用及小例子。

Context 通過元件樹提供了一個傳遞資料的方法，從而避免了在每一個層級手動的傳遞 props 屬性。在一個典型的 React 應用中，資料是通過 props 屬性由上向下（由父及子）的進行傳遞的，但這對於某些型別的屬性而言是極其繁瑣的（例如：地區偏好，UI主題），這是應用程式中許多元件都所需要的。 Context 提供了一種在元件之間共享此類值的方式，而不必通過元件樹的每個層級顯式地傳遞 props 。

引入

const {Provider, Consumer} = React.createContext(defaultValue);
 

1. 建立一對 { Provider, Consumer }。當 React 渲染 context 元件 Consumer 時，它將從元件樹的上層中最接近的匹配的 Provider 讀取當前的 context 值。如果上層的元件樹沒有一個匹配的 Provider，而此時你需要渲染一個 Consumer 元件，那麼你可以用到 defaultValue 。這有助於在不封裝它們的情況下對元件進行測試。
2. defaultValue可以書寫預設傳遞的值

Provider

<Provider value={/* some value */}>
 

接收一個 value 屬性傳遞給 Provider 的後代 Consumers。一個 Provider 可以聯絡到多個 Consumers。Providers 可以被巢狀以覆蓋元件樹內更深層次的值。

Consumer

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

接收一個 函式作為子節點. 函式接收當前 context 的值並返回一個 React 節點。傳遞給函式的 value

 將等於元件樹中上層 context 的最近的 Provider 的 value 屬性。如果 context 沒有 Provider ，那麼 value 引數將等於被傳遞給 createContext() 的 defaultValue 。

程式碼小例：

import React,{Component} from 'react'
const {Provider, Consumer} = React.createContext()
class Father extends Component{
    constructor (props){
        super(props)
        this.state={
            money:25
        }
    }
    render(){
        return (
            <Provider value={this.state}>
                <div>
                <h2>爸爸的錢：{this.state.money}</h2>
                <Consumer>
                    {(value)=><div>{value.money}</div>}
                </Consumer>
            </div>
            </Provider>  
        )
    }
}
export default Father