9 Context

公共信息（语言、主题）传递给每个组件，用props太繁琐

    import React from 'react'
    
    // 创建 Context 填入默认值（任何一个 js 变量）
    const ThemeContext = React.createContext('light')
    
    // 底层组件 - 函数是组件
    function ThemeLink (props) {
        // const theme = this.context // 会报错。函数式组件没有实例，即没有 this
    
        // 函数式组件可以使用 Consumer
        return <ThemeContext.Consumer>
            { value => <p>link's theme is {value}</p> }
        </ThemeContext.Consumer>
    }
    
    // 底层组件 - class 组件
    class ThemedButton extends React.Component {
        // 指定 contextType 读取当前的 theme context。
        // static contextType = ThemeContext // 也可以用 ThemedButton.contextType = ThemeContext
        render() {
            const theme = this.context // React 会往上找到最近的 theme Provider，然后使用它的值。
            return <div>
                <p>button's theme is {theme}</p>
            </div>
        }
    }
    ThemedButton.contextType = ThemeContext // 指定 contextType 读取当前的 theme context。
    
    // 中间的组件再也不必指明往下传递 theme 了。
    function Toolbar(props) {
        return (
            <div>
                <ThemedButton />
                <ThemeLink />
            </div>
        )
    }
    
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                theme: 'light'
            }
        }
        render() {
            return <ThemeContext.Provider value={this.state.theme}>
                <Toolbar />
                <hr/>
                <button onClick={this.changeTheme}>change theme</button>
            </ThemeContext.Provider>
        }
        changeTheme = () => {
            this.setState({
                theme: this.state.theme === 'light' ? 'dark' : 'light'
            })
        }
    }
    
    export default App