Context执行上下文

[twosugar]

在react官网中已经详细介绍了Context

Context提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递props。
在典型的React应用程序中，数据通过props自上而下（父对象）传递，但这对于应用程序中许多组件所需的某些类型的道具（例如区域设置首选项，UI主题）来说可能很麻烦。Context提供了一种在组件之间共享这些值的方法，而无需通过树的每个级别显式传递prop。

Context属于react的高级API，react其实并不希望开发者在一般情况下使用到它，因为这有可能引起数据的混乱，但事实上，很多比较优秀的React组件都通过Context来完成自己的功能，比如react-redux，利用了Context。

React.createContext

const MyContext = React.createContext(defaultValue);

创建Context对象。当React呈现一个订阅此Context对象的组件时，它将从Provider树中它上面最接近的匹配中读取当前上下文值。
仅当组件在树中没有匹配的Provider 时才使用该defaultValue参数。

Context.Provider

<MyContext.Provider value={/* some value */}>

每个Context对象都附带一个Provider React组件，允许使用组件来订阅上下文更改。
接受value要传递给作为此Provider的后代的消费组件的prop。一个提供商可以连接到许多消费者。可以嵌套提供程序以覆盖树中更深层的值。

Context.Consumer

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>

value传递给函数的参数将等于value树中上述此上下文的最接近的Provider 的prop。如果上面没有此上下文的Provider，则value参数将等于defaultValue传递给它的参数createContext()。

例子

import React from 'react'
//创建Context组件
const ThemeContext = React.createContext({
  theme: 'dark',
  toggle: () => {}, //向上下文设定一个回调方法
});

//运行APP
class Text extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = () => { 
      console.log('1111111')
      this.setState({
        theme: this.state.theme == 'red' ? 'green' : 'red',
      })
    };

    this.state = {
      theme: 'red',
      toggle: this.toggle,
    };
  }

  render() {
    return (
      <ThemeContext.Provider value={this.state}> 
        <Content />
      </ThemeContext.Provider>
    );
  }
}

//中间组件
function Content() {
  return (
    <div>
      <Button />
    </div>
  );
}

//接收组件
function Button() {
  return (
    <ThemeContext.Consumer>
      {({theme, toggle}) => {
        console.log(theme, toggle) // 初始化是'red'和回调函数
        return (<button
          onClick={toggle} //调用回调
          style={{backgroundColor: theme}}>
          Toggle Theme
        </button>)
      }}
    </ThemeContext.Consumer>
  );
}


export default Text