React全局状态管理（state）之Context的使用方法

    状态之间传递，一般由父组件向下传递给子组件。如果有的状态是全局都要用的话，这样专递就太麻烦了。    

    谈到全局状态管理，不得不说Redux，很有名气，个人认为比较适合大型项目开发。

    没做过什么超大项目的我。个人观点，Redux总感觉不舒心不直接。感觉做个简单的事情绕来绕去的。后来发现用React提供的Context 挺简单方便的，够我用。状态我想改就改。

 官方文档

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

https://react.docschina.org/docs/context.html

我的示例代码

这个我刚开始用，我的APP中用到的全局状态比较少，最多也就是登陆和主题了吧。

LoginContext.js

import React, {useState, createContext} from 'react';

export const LoginContext = createContext();

export const LoginProvider = props => {
    const [isLogin,setIsLogin] = useState(false);

    return (
        <LoginContext.Provider value={[isLogin,setIsLogin]}>
            {props.children}
        </LoginContext.Provider>
    );
};

App.js

然后在程序的入口文件比如App.js或者index.js外层嵌套代码，如下：

import {LoginProvider} from './LoginContext';

const App = () => {
    const colorScheme = useColorScheme();
    return (
        <LoginProvider>
            <NavigationContainer
                theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
                <Navigation/>
                <StatusBar/>
            </NavigationContainer>
        </LoginProvider>
    );
};  

绿色部分是需要修改的地方。

全局状态调用与修改

上面的配置一劳永逸，使用起来跟用useState差不多，很方便。任何组件中都可以调用。注意绿色部分即可。

import {LoginContext} from '../context/LoginContext';

const SchoolScreen = () => {
    const [isLogin,setIsLogin]= useContext(LoginContext);
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>消息</Text>
            <Button title={'注销'} onPress={()=>{
                setIsLogin(false);
            }}/>
        </View>
    );
};  

教程结束，希望对您有所帮助。