react Context

如何使用context

1. 创建context对象

import React from 'react'

export const AppContext = React.createContext()

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

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

      {({ state, actions }) => {
        return 
      }}
    

何时使用context

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

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

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

export const languageContext = React.createContext();
const chLanguage = {
    'button': '按钮'
}
class App extends React.Component {
  render() {
    return (
      
        
        
      
    );
  }

ToolbarContext.js

      {({ language }) => {
        return {language[button] />
      }}
    

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 (
      
    );
  }
}
ThemedButton.contextType = ThemeContext;

export default ThemedButton;

App.js

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

// 一个使用 ThemedButton 的中间组件
function Toolbar(props) {
  return (
    
      Change Theme
    
  );
}

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 (
      
        
          
        
        

          
        
      
    );
  }
}

ReactDOM.render(, document.root);