React Context 详解

React Context 是一个强大的组件广播功能，但是也不能随意滥用，它并不适合一些简单的组件通信，如果杀鸡用牛刀可能会起到相反的效果

什么时候使用

1. 当你要在组件树中共享一些全局数据的时候，比如要让你的应用风格可配置，或则语言可选 那么像这种 theme 或 language 的属性就可以托管给 Context

案例
先考虑不用context 的情况

// 假如现在你的组件树中有多个按钮需要随时切换背景颜色

// 你封装的按钮
class ThemeButton extends React.Component {
   
  render() {
   
    return <button style={
   {
   backgroundColor: this.props.theme}}>ThemeButton</button>
  }
}

// 在某个组件中使用了这个按钮
function Toolbar(props) {
   
  return (
    <div>
      <ThemeButton theme={
   props.theme}/>
    </div>
  )
}

// 为了能够在同一控制所有按钮的样式 你可以在App.js 中传入样式
class App extends Component {
   
  render() {
   
    return (
      <div>
        <Toolbar theme="blue"/>
      </div>
    );
  }
}

你会发现 就一个简单的theme 属性要通过 App -> Toolbar -> ThemeButton ,如果嵌套的关系更加复杂，那么这种传递props的方式就不太合适了

用 Context 广播 来优化

// 声明一下我将所有组件写在一起只是方便演示，你可以将组件写在不同的文件中
//1. 首先你可以在src 下创建一个context的文件并创建index.js
import React from 'react'

export const ThemeContext = React.createContext('green')

之后你就可以使用这个导出的ThemeContext

import {
   ThemeContext} from '../context'

class ThemeButton extends React.Component {
   
  static contextType = ThemeContext
  render(