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 (
            
                      
              
        )
    }
}
export default App;

Middle.js 中间组件，并不关心和他无关的组件。当然如果需要接值的话，也可以引入Consumer，基于 context 值进行渲染

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

Son.js

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

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

 说明：

  {value => /* 基于 context 值进行渲染*/}