React Context

Context 的目的是对于全局的需要多处使用的数据，不希望通过 prop 一层层传递下去，而是可以直接使用。

childContextTypes & getChildContext

该方案在 16.3 后不再是推荐方案。

React 最初提供的 context 方案是提供 context 数据的组件通过静态的 childContextType 来定义 context 中各字段的数据类型，通过 getChildContext 成员方法来提供实际的 context 数据，其中，返回的数据可以搭配 prop 和 state 来提供响应式的数据。而消费 context 数据的组件通过静态的 contextTypes 来指定需要消费的 context 字段的类型集合，然后即可通过 this.context[fieldName] 来使用。

注意，消费 context 的组件只需要定义需要的字段的类型即可，不需要是全部。同时，也不需要是提供 context 的组件的直接子组件。

import PropTypes from 'prop-types';

class Button extends React.Component {
  static contextTypes = {
    color: PropTypes.string
  };

  render() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
}

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component {
  static childContextTypes = {
    color: PropTypes.string
  };

  getChildContext() {
    return {color: "purple"};
  }

  render() {
    const children = this.props.messages.map((message) =>
      <Message text={message.text} />
    );
    return <div>{children}</div>;
  }
}

Context Provider & Consumer

React 16.3 后提出新的 context 方案 React.createContext(anyInitValue) ，然后使用其提供的 Provider 和 Consumer 来使用。

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

export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
});

export function ThemeTogglerButton() {
  // The Theme Toggler Button receives not only the theme
  // but also a toggleTheme function from the context
  return (
    <ThemeContext.Consumer>
      {({theme, toggleTheme}) => (
        <button
          onClick={toggleTheme}
          style={{backgroundColor: theme.background}}>
          Toggle Theme
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

function Content() {
  return (
    <div>
      <ThemeTogglerButton />
    </div>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);

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

    // State also contains the updater function so it will
    // be passed down into the context provider
    this.state = {
      theme: themes.light,
      toggleTheme: this.toggleTheme,
    };
  }

  render() {
    // The entire state is passed to the provider
    return (
      <ThemeContext.Provider value={this.state}>
        <Content />
      </ThemeContext.Provider>
    );
  }
}

这种方案可以同时使用多个 context（provider 和 consumer 都可以作为普通标签来嵌套使用），并且可以使用 react-adopt 之类的库来解决 consumer 过多嵌套的问题。

// Theme context, default to light theme
const ThemeContext = React.createContext('light');

// Signed-in user context
const UserContext = React.createContext({
    name: 'Guest'
});

class App extends React.Component {
    state = {
        signedInUser: {
            name: 'Joe'
        },
        theme: 'dark'
    };

    render() {
        const { signedInUser, theme } = this.state;

        return (
            <ThemeContext.Provider value={theme}>
                <UserContext.Provider value={signedInUser}>
                    <Content />
                    <hr />
                    <Content2 />
                </UserContext.Provider>
            </ThemeContext.Provider>
        );
    }
}

function Content() {
    return (
        <ThemeContext.Consumer>
            {theme => (
                <UserContext.Consumer>
                    {user => (
                        <div>
                            <div>user: {user.name}</div>
                            <div>theme: {theme}</div>
                        </div>
                    )}
                </UserContext.Consumer>
            )}
        </ThemeContext.Consumer>
    );
}

// 组合来简化 consumer 的嵌套
const ComposeConsumer = adopt({
    theme: <ThemeContext.Consumer />,
    user: <UserContext.Consumer />
});

function Content2() {
    return (
        <ComposeConsumer>
            {({ theme, user }) => (
                <div>
                    <div>user: {user.name}</div>
                    <div>theme: {theme}</div>
                </div>
            )}
        </ComposeConsumer>
    );
}

contextType

Provider / Consumer 形式的 context，在 class 组件中使用时，初期只能在 render 系列的方法中才能使用。在 16.6.0 时添加了 contextType 来方便 class 组件在 全生命周期 内使用。

具体来说是通过静态的 contextType 指向创建成的 context，然后内部可以使用 this.context 来直接消费 context。

需要注意的是，这种形式只能消费一个 context，别的 context 还是需要通过 consumer 的形式来消费，并且 this.context 是 provider 提供的值。

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

class App extends React.Component {
  state = {
    theme: 'dark'
  };

  render() {
    const { theme } = this.state;

    return (
      <ThemeContext.Provider value={theme}>
        <SingleCtx />
      </ThemeContext.Provider>
    );
  }
}

class SingleCtx extends React.Component {
  static contextType = ThemeContext;

  render() {
    return (
      <div>
        {this.context}
      </div>
    );
  }
}

Context Hook

useContext(createdContext) 是将在 16.7 引入的 context hook，便于在无状态组件中消费 createContext 创建的 context。使用语法上比 Consumer 的简单很多，能直接使用普通的语法而不需要使用 render prop 的语法。

function App() {
  const theme = useContext(ThemeContext)
  const language = useContext(LanguageContext)
  return <div>{theme} and {language}</div>
}

参考

• context – react doc
• React v16.6.0 – react doc
• Legacy Context – react doc
• useContext – react doc