react中context傳遞數據

在一個典型的 React 應用中，數據是通過 props 屬性自上而下（由父及子）進行傳遞的，但這種做法對於某些類型的屬性而言是極其繁瑣的（例如：地區偏好，UI 主題），這些屬性是應用程序中許多組件都需要的。Context 提供了一種在組件之間共享此類值的方式，而不必顯式地通過組件樹的逐層傳遞 props。

何時使用 Context ？
Context 設計目的是爲了共享那些對於一個組件樹而言是“全局”的數據，例如當前認證的用戶、主題或首選語言。

Context 主要應用場景在於很多不同層級的組件需要訪問同樣一些的數據。請謹慎使用，因爲這會使得組件的複用性變差。

使用案例：

App.js

import React from 'react';
import Middle from './Middle'
export const {Provider, Consumer} = React.createContext()


class App extends React.Component {
    constructor (props){
        super(props)
        this.state={
            money:25
        }
    }
    render(){
        return (
            <Provider value={this.state.money}>
                <Middle></Middle>      
            </Provider>  
        )
    }
}
export default App;

Middle.js 中間組件，並不關心和他無關的組件。當然如果需要接值的話，也可以引入Consumer，基於 context 值進行渲染

import React from 'react';
import Son from './Son'
class Middle extends React.Component {
    render() {
        return (
            <Son />
        )
    }
}
export default Middle;

Son.js

import React from 'react';
import { Consumer } from "./App";//引入Consumer

class Son extends React.Component{
    render(){
        return(  
            <Consumer>
                {value => <h1>我是接收祖輩的值：{value}</h1>}
            </Consumer>
        )
    }
}
export default Son;

 說明：

<Consumer>
  {value => /* 基於 context 值進行渲染*/}
</Consumer>