React context

react 父组件传递数据给到子组件，一般是通过props，子组件也通过props传递给孙子组件，一层层自上而下传递。当面对层级比较多的时候，每一层都需要接收上一层传递的props，然后传递给下一层。这就很繁琐了。react context就是解决这一问题的。

react context会在全局创建一个共享值，谁需要用到该值就自己去取，不用组件树逐层传递。使用context要想好是否有必要，因为context会导致组件的复用性变低。具体的使用方法是：

1、使用 React.createContext创建一个context，该方法接收一个初始化值。

const ThemeContext = React.creatContext(＂light＂)

2、在父组件中定义一个值，传递给孙子组件。通过上面创建的context名加".provider"使用：

Class App extends React.Component{

        render() {

            return (

                <ThemeContext.provider value="dark">

                    //中间组件名

                    <Toolbar />

                </ThemeContext.provider>

            )

       }

_

3、定义中间组件，此时中间组件不需要再承担传递props的职责了。

function Toolbar() {

        return (

            <div>

                <ThemeButton />

            </div>

        )

}

4、定义孙子组件，该组件需要使用到父组件传递过来的值。

class Themebutton extends React.Component {

        //定义contextType 为第一步创建的ThemeContext React会自动开始找provider的值并开始使用它         static contextType = ThemeContext；

        render () {

            return <button theme= { this.context } />；

        }

}