Context理解

官方文档

https://doc.react-china.org/docs/context.html#api

个人理解

context的使用用到生产者消费者模式，React.createContext创建一对 { Provider, Consumer }，Provider需要一个value属性，这个属性能够传递给 Provider 的后代 Consumers。

export const themes = {
  light: {
    foreground: '#ffffff',
    background: '#222222',
  },
  dark: {
    foreground: '#000000',
    background: '#eeeeee',
  },
};
//export 是将该变量导出，这样在其他文件中可以通过import导入
export const ThemeContext = React.createContext(
  themes.dark // 默认值
);

function ThemedButton(props) {
  return (
//使用Context.Consumer
    <ThemeContext.Consumer>
      {theme => (
        <button
          {...props}
          style={{backgroundColor: theme.background}}
        />

      )}
    </ThemeContext.Consumer>
  );
}
// 一个使用到ThemedButton组件的中间组件
function Toolbar(props) {
  return (
    <ThemedButton onClick={props.changeTheme}>
      Change Theme
    </ThemedButton>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: themes.light,
    };

    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };
  }

  render() {
    // ThemedButton 位于 ThemeProvider 内
    // 在外部使用时使用来自 state 里面的 theme
    // 默认 dark theme
    return (
      <div>
        //使用Context.Provider，保存了一个theme属性，能够在Context.Consumer中获得该属性
        <ThemeContext.Provider value={this.state.theme}>
          <Toolbar changeTheme={this.toggleTheme} />
        </ThemeContext.Provider>
        //上面的Toolbar 点击事件触发是，该ThemedButton的theme也随之改变
        <ThemeContext.Provider value={this.state.theme}>
          <ThemedButton/>
        </ThemeContext.Provider>
        //该ThemedButton 没有在ThemeContext.Provider中，不能获得theme属性值
          <ThemedButton />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.root);