Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据.
1. 作为一个全局数据，且使用的地方不限于是子组件，可能是孙子组件以及更深层的组件，可以避免使用大批量的props属性来传递属性
2. 向所有组件树下的组件广播数据
API
1. React.createContext(defaultValue)
2. Context.Provider
3. Context.Consumer
4. Context.displayName
基本使用实例
父组件：App.js
import React from 'react'
import './App.scss'
import './fix.scss'
import Footer from './footer/footer'
export const { Provider, Consumer } = React.createContext('light')
class App extends React.Component {
constructor(props) {
super(props) this.state = { a: []
}
}
render() {
return
( <div className="App"> <div> </div> <p>{this.state.a}</p>
<Provider value={this.state.a}>
<Footer />
</Provider>
</div> )
}
}
export default App子组件:Footer.js
import React from 'react'
import LitterFooter from '../littleFooter'
function Footer(props) {
return ( <div> <LitterFooter /> </div> )
}
export default Footer孙子组件：LitterFooter.js
import React from 'react'
import { Consumer } from '../App'
export default class LittleFooter extends React.Component
{
render() {
return <Consumer>{value => <p>父组件传的内容=>{value}</p>}</Consumer>
}
}将App.js中的Consumer暴露出去，以便组件树内的组件可以获取到这个Consumer，当子组件等获取Context中的数据的时候，要保证Provider和Consumer要配对使用。
3个问题
1. 只有当组件树中没有匹配到Provider，其defaultValue才会生效，如果往value值中传入了undefined，那么defaultValue值也不会生效
2. Consumer在进行取值的时候，会取离自己最近的Provider传递的值
3. 当Provider的value值发生更改的时候，内部的所有的消费组件都会发生重新渲染。Provider和内部的consumer组件都不受制于shouldComponentUpdate函数，因此Consumer组件在其祖先组件退出更新的时候，也会发生更新
