0x000 概述

Context就是全局state啦～～

0x001 题目

先上栗子，我们须要在Topbar中用到theme，然则theme必需从最外层传入，所以必需从最外层传入App，再传入TopBar，这只通报了两次，然则假如悉数组件都须要theme呢？或许有一个异常深的组件须要theme，而中心的大部分组件都不须要theme呢？为了通报这个theme必需一层一层的通报下去，有点难熬痛苦。

class TopBar extends React.Component {
    redder() {
        return <div>
            {this.props.theme}
        </div>
    }
}

class App extends React.Component {
    render() {
        return <div>
            <TopBar theme={this.props.theme}/>
        </div>
    }
}


ReactDom.render(
    <App theme='dark'/>,
    document.getElementById('app')
)

0x002 处理

Context能够处理这个题目，上栗子：

• 建立context

  const ThemeContext = React.createContext('theme'); 

  React.createContext建立了一个context，它返回一个对象，能够打印出来：

  
  须要注重的是：

  • Consumer：消费者
  • Provider：供应者

• 建立供应者

  class App extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              theme: 'dark'
          }
      }
  
      render() {
          return (
              <ThemeContext.Provider value={this.state.theme}>
                  <ThemedButton/>
                  <button onClick={() => this.handleChangeTheme()} className='btn btn-primary'> 修正主题</button>
              </ThemeContext.Provider>
          );
      }
  
      handleChangeTheme() {
          this.setState({
              theme: this.state.theme === 'light' ? 'dark' : 'light'
          })
      }
  }

  ThemeContext.Provider是一个组件，value属性供应的值在所有的Consumer中都能够访问到，条件是必需包裹在Provider中。

• 建立消费者

  class ThemedButton extends React.Component {
  
      render() {
          return <ThemeContext.Consumer>
              {
                  (value) => <div>{value}</div>
              }
          </ThemeContext.Consumer>
      }
  }

  ThemeContext.consumer是一个组件，包裹在个中的函数组件能够访问到ThemeContext.Provider声明时刻传入的value，并且在ThemeContext.Provider的value更改的时刻，再次衬着。

• 运用

  ReactDom.render(
      <App theme='dark'/>,
      document.getElementById('app')
  )

• 结果
  

• 全部栗子：

  import ReactDom from 'react-dom'
  import React from 'react'
  
  const ThemeContext = React.createContext('theme');
  
  class ThemedButton extends React.Component {
  
      render() {
          return <ThemeContext.Consumer>
              {
                  (value) => <div>{value}</div>
              }
          </ThemeContext.Consumer>
      }
  }
  
  class App extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              theme: 'dark'
          }
      }
  
      render() {
          return (
              <ThemeContext.Provider value={this.state.theme}>
                  <ThemedButton/>
                  <button onClick={() => this.handleChangeTheme()} className='btn btn-primary'> 修正主题</button>
              </ThemeContext.Provider>
          );
      }
  
      handleChangeTheme() {
          this.setState({
              theme: this.state.theme === 'light' ? 'dark' : 'light'
          })
      }
  }
  
  ReactDom.render(
      <App theme='dark'/>,
      document.getElementById('app')
  )