React.context是什么？

「context」とは什么意思？

流程的背景

这是一个关于上下文的例子。

import React from 'react'

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

export const ThemeContext = React.createContext(themes.dark);

使用React.createContext()来定义要共享的数据。
这将被定义为以themes.dark为默认值使用。
defaultValue是在某个组件无法找到Provider（父子关系❌）时使用的值。

import React, { Component } from 'react'
import { ThemeContext } from './ThemeContext';

class ThemedButton extends Component {
  render() {
      let props = this.props;
      let theme = this.context;
    return (
      <button 
        {...props} 
        onClick={props.changeTheme}
        style={{ backgroundColor: theme.background, color: theme.foreground }}>
            button1
      </button>
    );
  }
}
ThemedButton.contextType = ThemeContext;
export default ThemedButton;

你可以将使用React.createContext()创建的上下文对象（ThemeContext）指定给需要的类的contextType属性。
通过使用这个属性，在类内部可以使用this.context来查找并读取最近的Provider中的值，以便实现相应上下文的功能。

import React, { Component } from 'react'
import { ThemeContext, themes } from './ThemeContext';
import ThemedButton from './ThemedButton';

export default class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            theme: themes.light,
        };
        this.toggleTheme = () => {
            this.setState((prev) => ({
                theme: prev.theme === themes.dark ? themes.light : themes.dark,
            }));
         };
    }
  render() {
    return (
      <div>
          <ThemeContext.Provider value={this.state.theme}>
              <ThemedButton changeTheme={this.toggleTheme} />
              <ThemeContext.Consumer>
                  {(theme) => (
                        <div 
                            style={{
                                height: 300, 
                                    width:300, 
                                    backgroundColor: theme.background,}}
                                    ></div>
                                )}
              </ThemeContext.Consumer>
          </ThemeContext.Provider>
          <ThemedButton />
      </div>
    );
  }
}

被包裹在其中
的backgroundColor由Provider的value prop确定，它将被设置为“light”。Provider会将这个值传递给下层的组件。当点击下层的ThemedButton时，通过toggleTheme方法，backgroundColor会改变。
的theme参数与它所在的上层最近的Provider的value prop相同。因此，和的backgroundColor是共享的，始终保持一致。
最底部的没有被所包裹，因此根据ThemeContext.js中的逻辑，它的backgroundColor始终是dark。
export const ThemeContext = React.createContext(themes.dark);

使用 useContext 钩子

import React from 'react'
import { useContext } from 'react'
import { ThemeContext } from './ThemeContext'

export default function ThemedButton(props) {
    const theme = useContext(ThemeContext)
  return (
          <button 
        {...props} 
        onClick={props.changeTheme}
        style={{ backgroundColor: theme.background, color: theme.foreground }}>
            button1
            </button>
  )
}