反应原生的关于Context API的完整说明

问题描述 投票:1回答:1

我对Context API的工作原理有点困惑

正如文档所说的关于Context Provider

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

我刚开始尝试这样一个简单的代码:

//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功能本身?

javascript reactjs react-native
1个回答
1
投票

你是绝对正确的,你不需要在React.createContext中提供任何东西就可以使用它。您在createContext中提供的数据只是默认值,并且稍后在您设置Context.Provider时将被覆盖。但是,我强烈建议您始终提供默认值,原因如下:

  1. 通过这样做,您可以提前考虑上下文所服务的数据类型,从而帮助您更好地理解代码的结构。从长远来看,这种习惯会对你有所帮助
  2. 它为您正在使用的任何IDE(例如Visual Studio)提供了一个关于Context数据的线索,它会在您编写代码时提供更好的提示
© www.soinside.com 2019 - 2024. All rights reserved.