react Context

如何使用context

1. 创建context对象

import React from 'react'

export const AppContext = React.createContext()

2. 把想要用context的数据的节点使用context.Provider进行包裹，并且传入对应的数据。

<AppContext.Provider value={{
        state: this.state,
        actions: this.actions,
      }}>
      <Router>
        <div className="App">
          <div className="container pb-5">
            <Route path="/" exact component={Home} />
            <Route path="/create" component={Create} />
            <Route path="/edit/:id" component={Create} />
          </div>
        </div>
      </Router>
</AppContext.Provider>

3. 把想要使用context的组件的地方，使用Context.Consumer包裹起来，返回一个函数表达式，函数的参数就是我们传入的值。

<AppContext.Consumer>
      {({ state, actions }) => {
        return <Component {...props} data={state} actions={actions} />
      }}
    </AppContext.Consumer>

何时使用context

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。有的时候在组件树中很多不同层级的组件需要访问一批数据。

Context 能让你将这些数据向组件树下所有的组件进行“广播”，所有的组件都能访问到这些数据，也能访问到后续的数据更新。

举个栗子：
1. 我们在实现多语言程序的时候，可以将语言文件在根组件通过context传递给各个组件

export const languageContext = React.createContext();
const chLanguage = {
    'button': '按钮'
}
class App extends React.Component {
  render() {
    return (
      <languageContext.Provider language={chLanguage}>
        <Toolbar />
        <Button />
      </languageContext.Provider>
    );
  }

ToolbarContext.js

<languageContext.Consumer>
      {({ language }) => {
        return <button>{language[button]</button> />
      }}
    </languageContext.Consumer>

2. 主题动态调整

theme-context.js

export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};

export const ThemeContext = React.createContext(
  themes.dark // 默认值
);

themed-button.js

import {ThemeContext} from './theme-context';

class ThemedButton extends React.Component {
  render() {
    let props = this.props;
    let theme = this.context;
    return (
      <button
        {...props}
        style={{backgroundColor: theme.background}}
      />
    );
  }
}
ThemedButton.contextType = ThemeContext;

export default ThemedButton;

App.js

import {ThemeContext, themes} from './theme-context';
import ThemedButton from './themed-button';

// 一个使用 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() {
    // 在 ThemeProvider 内部的 ThemedButton 按钮组件使用 state 中的 theme 值，
    // 而外部的组件使用默认的 theme 值
    return (
      <Page>
        <ThemeContext.Provider value={this.state.theme}>
          <Toolbar changeTheme={this.toggleTheme} />
        </ThemeContext.Provider>
        <Section>
          <ThemedButton />
        </Section>
      </Page>
    );
  }
}

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