React 新版本context使用方法

React在16.3版本中发布了新版的context。在新版本中使用了Provider和Customer模式，即在顶层的Provider中的value提供数据，在子孙等下级节点中使用Consumer来获取值。
首先，我们创建一个content实例createContext.js：

import React from 'react';
export const testContext = React.createContext({
    color: "green"
})

新建这个公共的createContext的目的是为了Provider 和 Consumer 来自同一次 React.createContext 调用（它的必须要求）

其次，我们新建一个父组件main.js:

import React, { Component } from 'react';
import {testContext} from './createContext'
import ChildrenPage from './childrenPage'
export default class Main extends Component {
    render() {
        let name ="小人头"
        return(
            

                
                    
父组件定义的值:{ name }
                    
                
            
        )
    }
}

然后在新建一个子组件childrenPage.js：

import React, { Component } from 'react';
import GrandSon from './grandson'
export default class childrenPage extends Component {
    constructor(props) {
        super(props)
        this.state = { }
    }
    render() {
        return(
            

                
这是子组件
                
            
        )
    }
}

最后我们在新建一个孙子组件grandson.js：

import React, { Component } from 'react';
import {testContext} from '../createContext'


export default class GrandSon extends Component {
    constructor(props) {
        super(props)
        this.state = { }
    }
    render() {
        return(
            
                { (name) => (
                    

                        
这是孙子组件
                        {name.color}
                    
                )}
            
        )
    }
}

我们运行程序可以看到，对应的color的值就是从父组件直接传值到孙子组件，而不必一层一层的通过props进行传值，相比较以前的那种传值更加的方便、简介、明了。