javascript - 在React Native中有关Context API的完整说明

我对Context API的工作方式有些困惑

正如文档中关于Context Provider所说的那样：


  接受要传递给作为此Provider的后代的使用组件的值属性。一个提供商可以连接到许多消费者。可以嵌套提供程序以覆盖树中更深的值。


我只是开始尝试这样的简单代码：

//App.js

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.changeColor=(color, value)=>{
      this.setState({[color]:value})
    }
    this.state={
      changeColor:this.changeColor,
      red:0,
      green:0,
      blue:0,
    }
  }

  render() {
    console.disableYellowBox = true;
    return (
      <ThemeContext.Provider value={this.state}>
        <InitialScreen/>
      </ThemeContext.Provider>
    );
  }
}

//InitialScreen.js

export default class Login extends Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {({red, green, blue, changeColor})=>(
          <View style={{flex:1}}>
            <View style={{flexDirection:'row', justifyContent:'space-between'}}>
              <Text>Red: </Text>
              <Slider
                style={{width:'80%'}}
                minimumValue={0}
                maximumValue={255}
                step={1}
                value={red}
                onValueChange={(e)=>{changeColor('red', e)}}
              />
            </View>
            <View style={{flexDirection:'row', justifyContent:'space-between'}}>
              <Text>Green: </Text>
              <Slider
                style={{width:'80%'}}
                minimumValue={0}
                maximumValue={255}
                step={1}
                value={green}
                onValueChange={(e)=>{changeColor('green', e)}}
              />
            </View>
            <View style={{flexDirection:'row', justifyContent:'space-between'}}>
              <Text>Blue: </Text>
              <Slider
                style={{width:'80%'}}
                minimumValue={0}
                maximumValue={255}
                step={1}
                value={blue}
                onValueChange={(e)=>{changeColor('blue', e)}}
              />
            </View>
            <View style={[GlobalStyles.Center, {flex:1, backgroundColor:'rgb('+red+', '+green+', '+blue+')'}]}>
            </View>
          </View>
        )}
      </ThemeContext.Consumer>
    );
  }
}

//themeContext.js

import React from 'react';

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

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

我不知道Object中的React.createContext({...})是什么意思，我可以在this.state中传递Provider value props，这意味着我不需要在React.createContext({...}) AFAIK中定义任何内容，

还是我做错了什么，所以我没有使用Context函数本身？

最佳答案

您是完全正确的，您无需在React.createContext中提供任何内容即可使用它。您在createContext中提供的数据仅是默认值，并且在以后设置Context.Provider时将被覆盖。但是，由于以下原因，我强烈建议您始终提供默认值：


通过这样做，您可以提前考虑上下文将服务于哪种数据，从而帮助您更好地理解代码的结构。这种习惯从长远来看会帮助您
它为您使用的任何IDE（例如Visual Studio）提供了上下文数据的线索，并且在您编写代码时会提供更好的提示